javascript - Step Plot D3.js 中缺少初始步骤

Question

这是一个我还没有找到彻底修复的问题。

在我下面的步骤图中:

http://jsfiddle.net/q47r3pyk/7/

你可以看到我在图表的开头有一条垂直的蓝线。

这是因为我添加了额外的 x 值和 y 值，以便第一步将显示在步骤图中。

如果你看

http://jsfiddle.net/q47r3pyk/8/

我用

删除了第一个虚拟条目

“12-Jul-14” 的 x 值 0

的 y 值

我的步进图的第一步的宽度为零。

在 d3.js 中是否有推荐的方法来显示第一步而不丢失最后一步，方法是使用 step-after？还是修复了我添加虚拟值时出现的垂直蓝线？

步骤在

中指定

var line = d3.svg.line()
        .x(function (d) {
               return x(d.x);
           })
        .y(function (d) {
               return y(+d.y);
           })
        .interpolate("step-after");

Answer 1

您可以使用 SVG 剪辑路径剪辑路径:

svg.append("clipPath").attr("id", "canvasClip")
.append("rect")
.attr("height", height)
.attr("width", width)

然后在你的行中引用剪辑路径:

svg.append("path")
        .datum(formatted_data)
        .attr("class", "line")
        .attr("d", line)
        .attr("clip-path", "url(#canvasClip)")

这是 fiddle ，它似乎工作正常:

http://jsfiddle.net/q47r3pyk/11/

但是，最终，我认为这是插值器按其应有的方式运行的情况，您真的不应该考虑如何颠覆它，而应该考虑它是否是适合您的数据的插值器。在这种情况下，我会拒绝，并建议您使用“step”作为插值器而不是“step-before”或“step-after”。我认为这会为您提供您正在寻找的结果并与您的交互性很好地对齐。