D3:用虚线笔划绘制插补路径的一部分 [英] D3: Draw part of interpolated path with dashed stroke

问题描述

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

I'm drawing a simple interpolated line using D3.js (output as path). However, I want part of the path to have a dashed stroke if a boolean in a data point is set to true:

链接到图片

一个简单的解决方案是改为使用<line>个线段进行绘制-但是那样我会丢失插值.

An easy solution would be to just draw it with <line> segments instead - but that way I lose the interpolation.

然后我从mbostock找到了一个示例，展示了如何沿着插值法绘制渐变小路.我将其修改为在布尔值设置为true时仅绘制透明路径填充，在布尔值设置为false时仅填充透明填充-而我的 old 路径全为虚线. 可行(排队上面的屏幕快照)-但是通过向DOM相反添加大约一千个路径元素，而只有一个路径.

Then I found an example from mbostock, showing how to draw a gradient along a interpolated path. I modified it to just draw transparent path fills whenever the boolean was set to true and white fills when false - while my old path is all dashed. That works (queue the above screenshot) - but by adding around thousand path elements to the DOM contra having only a single path.

使用这么多DOM元素是不理想的，尤其是因为我要绘制更多曲线并且站点需要进行移动优化.我是否缺少一个更简单的解决方案?

It's not desirable with that many DOM elements, especially since I'm going to make more curves and the site needs to be mobile optimized. Am I missing a much simpler solution?

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

Wouldn't mind a modified version of mbostock's example doing the heavy calculations in advance, as long as the DOM output is simple.

谢谢！

推荐答案

您可以使用stroke-dasharray在正确位置的生成路径的笔划中添加破折号.这将需要找到适当的破折号长度.可以通过在路径上调用pathElm.getPathLength()直到您希望它开始破折点并结束它的位置来完成此操作.

You could use stroke-dasharray to add dashes in the stroke of the generated path in the right places. That would entail finding the proper dash lengths. This can be done by calling pathElm.getPathLength() on the path up to the point where you want it to start being dashed, and to where you want it to end.

比方说，路径A是破折号之前应该开始的部分.为该部分设置d属性，然后在其上调用getPathLength().我们称这个长度为 a .

Let's say path A that is the part that is before the dashes should start. Set the d attribute with that part and call getPathLength() on it. Let's call this length a.

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

Append the the part of the path that should be dashed to the d attribute, then call getPathLength() again. Let's call this length b.

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

Create a new path element with the remaining part of the path, then call getPathLength() on that. Let's call this length c.

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

Construct a stroke-dasharray property string something like this:

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;

这是一个静态示例.

这篇关于D3:用虚线笔划绘制插补路径的一部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！