javascript - 路径长度变化时保持 stroke-dasharray 一致

Question

我有一条由用户使用 D3.js 绘制的路径。

我想在我的用户绘制路径上定义一个破折号数组，但是，随着它改变其形状和长度，破折号的行为不一致并且间隙在移动并变得越来越小。

这是一个代码笔:

https://codepen.io/Richacinas/pen/YjXpBE

随意 fork ..绘制用户路径的函数是这个:

DrawItGraph.prototype.draw = function() {
    ...

    var pos = this.d3.mouse(event.target)
    if (pos[1] > this.chartHeight) return

    var date = this.clamp(this.middleValue + 2629743, this.maxValue, this.convection.x.invert(pos[0]))
    var value = this.clamp(0, this.convection.y.domain()[1], this.convection.y.invert(pos[1]))

    this.userData.forEach(function (d) {
        if (Math.round(Math.abs(d.date - date) / 60000000) < 50) {
            d.value = value
            d.defined = true
        }
    })

    this.yourDataSel.at({d: this.line.defined(this.format('defined'))(this.userData)})

    if (this.d3.mean(this.userData, this.format('defined')) === 1) {
        this.graphCompleted = true
    }
}

我怀疑我必须根据路径长度动态更改 stroke-dashoffset 和/或 stroke-dasharray，但是，我不知道正确的公式是什么......

非常感谢

Answer 1

您的问题不是破折号数组或破折号偏移量。让我们看一个示例生成的路径:

.your-line {
    stroke: #ffb531;
    stroke-width: 10;
    stroke-dasharray: 15;
}

<svg width="600" viewBox="1000 0 800 440">
  <path class="your-line" d="M1031.9776744186047,214L1099.9652386780906,189L1170.1216156670746,188L1238.0148837209304,188L1308.1712607099143,153.00000000000006L1378.3276376988983,174.00000000000003L1446.1266095471235,163.00000000000006L1516.2829865361077,218.99999999999997L1584.1762545899633,201L1654.3326315789475,201L1724.4890085679315,114.99999999999994L1787.85605875153,195L1858.012435740514,195L1858.012435740514,195L1787.85605875153,195L1724.4890085679315,114.99999999999994L1654.3326315789475,201L1584.1762545899633,201L1516.2829865361077,218.99999999999997L1446.1266095471235,163.00000000000006L1378.3276376988983,174.00000000000003L1308.1712607099143,153.00000000000006L1238.0148837209304,188L1170.1216156670746,188L1099.9652386780906,189L1031.9776744186047,214Z"></path>
</svg>

如果我们拉出前几个坐标和后几个坐标，问题应该就很明显了:

M 1031, 214
L 1099, 189
L 1170, 188
...
L 1170, 188
L 1099, 189
L 1031, 214
Z

你的问题是你没有画一条线，你画的是一条向左移动然后再返回的路径，在相同的坐标上，到起点。

随着路径长度的变化，破折号图案会 self 干扰并使破折号看起来会变大和变小。

您需要更新画线代码以仅在一个方向上绘制一条路径。不是封闭的形状。