Question

这是一个我没有发现干净修复的问题。

在我的下一步图中：

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

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

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

如果你看一下

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

我用

删除第一个虚拟条目

"12-Jul-14"的x值 y值0

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

在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 clip-path剪切路径：

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/

但是，最终，我认为这是插补器按预期运行的情况，你真的不应该考虑如何颠覆它，而是它是否适合你的内插器数据。在这种情况下，我会说不，并建议你使用＆＃34; step＆＃34;作为你的插补器而不是＆＃34; step-before＆＃34;或者＆＃34;继续＆＃34;我认为这会为您提供您正在寻找的结果，并与您的互动性很好地对齐。

Answer 2

这有帮助吗？

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

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

fiddle

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

2 个答案: