步骤图 D3.js 中缺少初始步骤

Missing Initial Step from Step Plot D3.js

本文关键字：js D3      更新时间：2023-09-26
这是我

还没有发现干净修复的问题。

在下面的步骤图中：

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");
您可以使用 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)")

这是小提琴，它似乎工作正常：

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

但是，归根结底，我认为这是插值器按其应有的方式运行的情况，您真的不应该考虑如何颠覆它，而应该考虑它是否是适合您的数据的插值器。在这种情况下，我会说不，并建议你使用"step"作为你的插值器，而不是"step-before"或"step-after"。我认为这会给你你想要的结果，并与你的互动性很好地保持一致。

这是有帮助吗？

我已经尝试了几次，我认为这是我得到的最好的结果，希望对您有所帮助！

x.domain(d3.extent(x_axis, function (d) {
    return parseDate(d);
})).nice(x_axis.length);

小提琴

相关文章：