如何在折線圖之間放置空格使用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 + ')')，然後按照您選擇的距離（例如50）爲每個組增加yTranslate。

如果您願意，也可以將y-翻譯的數量作爲該組的一個屬性，並在之前的組定義中進行設置。這與您指定color的方式類似。