javascript - 如何使用 d3.js 在折线图的线条之间放置空格

Question

我目前正在绘制 4 条线。我希望每行之间有一个空格。类似图片中的内容。

我该怎么做？

http://plnkr.co/edit/qmkxYEJYpIkXUQUMQMDa?p=preview

paths.attr('transform', null)
            .transition()
            .duration(duration)
            .ease('linear')
            .attr('transform', 'translate(' + x(now - (limit - 1) * duration) + ')')
            .each('end', tick)

Answer 1

您可以向每个单独的路径添加一个 translate，只需将它们平移不同数量的 y 即可将它们彼此分开。

可以在 this fork 找到示例您的代码。

当您循环浏览组时，您已经为每个组添加了一条路径。您只需添加另一个属性:.attr('transform', 'translate(0, ' + yTranslate + ')')，然后将 yTranslate 增加您的距离每个组的选择(例如50)。

如果您愿意，您还可以将 y 平移量设置为组的属性，并提前在组定义中进行设置。这与指定颜色的方式类似。