如何使用D3.js沿SVG路径用自定义形状定制线条样式？

SVG里的标准线条能修改stroke-width、color、linecap、dasharray这些基础属性实现虚线、点线，但能不能给线条加更复杂的效果？比如沿着已有路径重复放置星星、十字这类自定义图形，就像点线但用自定义形状？比如黑白打印折线图时，靠颜色区分的线条辨识度低，这种方案就很实用。

给出的D3绘制路径示例代码：

const drawLine = d3.line()
        .y(d => y(d.y))
        .x(d => x(d.x))

输出的SVG路径：

<path class="line" d="M530,116.2995087503838L454.28571428571433,122.98894688363525L227.14285714285717,102.0018421860608L151.42857142857142,65.41142155357693L75.71428571428571,50.420632483880865L0,0"></path>

需求：能不能在这条路径上均匀放置和数据无关的形状？也接受用CSS技巧实现自定义线条样式的方案。

解决方法 #

方法一：用D3沿路径均匀放置自定义形状 #

直接结合D3和SVG的路径API，获取路径上的均匀点位，再在每个点位绘制自定义形状。

步骤很直观：

1. 获取目标路径的总长度
2. 设置形状之间的间隔（比如每30px一个）
3. 循环计算每个间隔点的坐标，生成形状元素

示例代码（以十字形状为例）：

const path = d3.select('.line');
const pathEl = path.node();
const totalLength = pathEl.getTotalLength();
const spacing = 30; // 控制形状之间的距离

// 生成所有要放置形状的点位
const points = [];
for (let i = spacing; i < totalLength; i += spacing) {
  const point = pathEl.getPointAtLength(i);
  points.push({x: point.x, y: point.y});
}

// 在每个点位绘制十字
path.selectParent().selectAll('.custom-shape')
  .data(points)
  .enter()
  .append('g')
  .attr('class', 'custom-shape')
  .attr('transform', d => `translate(${d.x}, ${d.y})`)
  .append('path')
  .attr('d', 'M-5,0 h10 M0,-5 v10') // 十字的SVG路径
  .attr('stroke', '#333')
  .attr('stroke-width', 2);

要换成星星的话，把十字的d路径替换成星星的路径即可，比如：

<path d="M0,-8 L1.9,2.8 L8.7,2.8 L3,5.4 L4.9,12 L0,7.8 L-4.9,12 L-3,5.4 L-8.7,2.8 L-1.9,2.8 Z" fill="#333"/>

方法二：用CSS SVG特性实现（无需JS） #

方案A：用<marker>定义重复标记

SVG的<marker>可以定义在路径的每个线段中间重复出现的形状，适合折线场景。

示例代码：

<!-- 先定义好要重复的标记 -->
<defs>
  <marker id="cross-marker" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="10" markerHeight="10" orient="auto">
    <path d="M0,5 h10 M5,0 v10" stroke="#333" stroke-width="2"/>
  </marker>
</defs>

<!-- 把标记应用到路径上 -->
<path class="line" d="M530,116.2995087503838L454.28571428571433,122.98894688363525L227.14285714285717,102.0018421860608L151.42857142857142,65.41142155357693L75.71428571428571,50.420632483880865L0,0" 
      stroke="#ccc" <!-- 需要保留原线条就加上，不需要则设为none -->
      marker-mid="url(#cross-marker)"/>

方案B：用<pattern>做自定义“虚线”

把自定义形状做成重复图案，然后用stroke引用这个图案，配合stroke-dasharray实现连续重复的效果。

示例代码：

<!-- 定义星星图案 -->
<defs>
  <pattern id="star-pattern" width="30" height="30" patternUnits="userSpaceOnUse">
    <path d="M15,7 L17,19 L27,19 L19,13 L21,25 L15,19 L9,25 L11,13 L3,19 L13,19 Z" fill="#333"/>
  </pattern>
</defs>

<!-- 应用到路径 -->
<path class="line" d="M530,116.2995087503838L454.28571428571433,122.98894688363525L227.14285714285717,102.0018421860608L151.42857142857142,65.41142155357693L75.71428571428571,50.420632483880865L0,0" 
      stroke="url(#star-pattern)" 
      stroke-width="15" <!-- 要和图案尺寸匹配 -->
      stroke-dasharray="30" <!-- 间隔等于图案宽度，实现连续重复 -->
      fill="none"/>

内容的提问来源于stack exchange，提问作者atlas_scoffed