如何使用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-translation的数量作为组的属性，并在之前的组定义中进行设置。这与您指定color。

的方式类似