Javascript D3：使用虚线笔划绘制插值路径的一部分

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

一个简单的解决方案是只使用

段来绘制，但这样我就失去了插值

然后我从mbostock中找到，展示了如何沿插值路径绘制渐变。我对它进行了修改，只要布尔值设置为true，就只绘制透明路径填充，如果布尔值设置为false，则绘制白色填充，而我的旧路径都是虚线。 这是可行的（将上面的屏幕截图排成队列）-但是通过向只有一条路径的DOM contra添加大约1000个路径元素

使用这么多DOM元素是不可取的，特别是因为我将制作更多曲线，并且站点需要进行移动优化。我是否错过了一个更简单的解决方案

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

谢谢

我为你准备了这个。截图如下：

我认为你们有足够的材料来设计一个适合你们需要的解决方案

另请看本页：

---

您可以使用

笔划dasharray

在生成的路径笔划的正确位置添加破折号。这需要找到合适的破折号长度。这可以通过调用路径上的

pathElm.getPathLength（）

来完成，直到您希望它开始虚线的位置，以及希望它结束的位置

假设路径A是破折号开始之前的部分。使用该部分设置d属性，并对其调用

getPathLength（）

。我们把这个长度称为a

将路径中应为虚线的部分附加到d属性，然后再次调用

getPathLength（）

。我们把这个长度称为b

用路径的剩余部分创建一个新的path元素，然后对该元素调用

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;

var a=getPathLengthA（）；
var b=getPathLengthB（）；
var c=getPathLengthC（）；
var dasharray=a+“”；
对于（var usedlen=0；usedlen<（b-a）；）{
dasharray+=“5 10”//只要你需要什么样的破折号图案
usedlen+=15；//从上一行开始添加划线图案长度
}
dasharray+=c；
pathElement.style.strokeDasharray=dasharray；

---

这是其中的一部分。

谢谢！事实上，我在另一篇文章中偶然发现了你的例子。我只是不知道如何实施它，因为没有父母/孩子关系。我当前的（简化的）代码：var set=d3.svg.line（）.x（函数（d）{return d.x；}）.y（函数（d）{return scale（d.y）；}）.interpolate（“basis”）；和：var lines=canvas.append（“path”）.attr（“d”，set（opt.data））opt.data包含布尔标志。