D3：用虚线描绘绘制插值路径的一部分

Question

我使用D3.js绘制一条简单的插值线（输出为路径）。但是，如果数据点中的布尔值设置为true，我希望路径的一部分具有虚线笔划：

Link to image

一个简单的解决方案就是用<line>段来绘制它 - 但这样我就失去了插值。

然后我从mbostock找到了an example，展示了如何沿着插值路径绘制渐变。我修改它只是在布尔值设置为true时填充透明路径填充，而白色填充为false时 - 我的旧路径全部为虚线。 这是有效的（排队上面的截图） - 但是通过向只有一条路径的DOM对象添加大约一千个路径元素。

对于那么多DOM元素来说，这是不可取的，特别是因为我要制作更多曲线并且网站需要进行移动优化。我错过了一个更简单的解决方案吗？

只要DOM输出很简单，就不会介意mbostock的修改版本的例子提前进行重计算。

谢谢！

Answer 1

您可以使用stroke-dasharray在正确位置生成的路径的笔划中添加短划线。这需要找到合适的短划线长度。这可以通过在路径上调用pathElm.getPathLength()直到您希望它开始虚线的点，以及您希望它结束​​的位置来完成。

假设路径A是破折号之前应该开始的部分。使用该部分设置d属性并在其上调用getPathLength()。我们称这个长度 a 。

将应该虚线的路径部分附加到d属性，然后再次调用getPathLength()。我们称这个长度 b 。

使用路径的剩余部分创建一个新路径元素，然后在其上调用getPathLength()。我们称这个长度为 c 。

构造一个stroke-dasharray属性字符串，如下所示：

var a = getPathLengthA();
var b = getPathLengthB();
var c = getPathLengthC();
var dasharray = a + " ";
for(var usedlen = 0; usedlen < (b-a); ) {
  dasharray += "5 10 "; // just whatever dash pattern you need
  usedlen += 15; // add the dash pattern length from the line above
}
dasharray += c;
pathElement.style.strokeDasharray = dasharray;

这是static example。

Answer 2

我为example准备了another SO question。屏幕截图在这里：

我认为您有足够的材料来设计符合您需求的解决方案。

再看一下这个页面：

SVG Path Styling