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

这是一个问题，我还没有找到一个干净的解决办法

在我下面的步骤图中：

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

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

如果你看

其中，我删除了第一个虚拟条目

“2014年7月12日”

0的y值

步进图的第一步宽度为零

在d3.js中是否有一种推荐的方法，通过在之后使用

步骤来显示第一步而不丢失最后一步？或者修复删除我添加虚拟值时出现的垂直蓝线

步骤在中指定

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)")

这是小提琴，它似乎很好用：


但是，最终，我认为这是一个插值器按其应有的方式运行的情况，你真的不应该考虑如何破坏它，而应该考虑它是否是数据的正确插值器。在这种情况下，我会说不，并建议您使用“步骤”作为插值器，而不是“步骤之前”或“步骤之后”。我认为这将为您提供所需的结果，并与您的交互性保持一致。
您可以使用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)")

这是小提琴，它似乎很好用：


但是，最终，我认为这是一个插值器按其应有的方式运行的情况，你真的不应该考虑如何破坏它，而应该考虑它是否是数据的正确插值器。在这种情况下，我会说不，并建议您使用“步骤”作为插值器，而不是“步骤之前”或“步骤之后”。我想这会给你你想要的结果，并与你的互动性很好地吻合。
这有帮助吗

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

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

这有帮助吗

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

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

请注意：如果您从

之前的

步骤更改为

之后的

步骤，则“不仅”第一步和最后一步会发生更改。在视觉上，两者之间的一切也将不同。例如，对于17thNov，您在4.1处有一行（
步骤在
之后）或在5.2处有一行（
步骤在
之前）。因此，您正在向用户销售不同的故事。因此，我的建议是：确保根据需要使用正确的步长函数。一旦决定，在开始或结束处添加一个点（如您所建议的）。无法避免imho，因为您需要告诉viz从何处开始/停止（无法知道），另请参见中的注释。请注意：如果您从

之前的

步骤更改为

之后的

步骤，则“不仅”第一步和最后一步会发生更改。在视觉上，两者之间的一切也将不同。例如，对于17thNov，您在4.1处有一行（
步骤在
之后）或在5.2处有一行（
步骤在
之前）。因此，您正在向用户销售不同的故事。因此，我的建议是：确保根据需要使用正确的步长函数。一旦决定，在开始或结束处添加一个点（如您所建议的）。无法避免imho，因为您需要告诉viz从何处开始/停止（无法知道），请参见中的注释