D3修改路徑的y

Question

我有一些用戶事件追加不同的路徑到svg。我想要的是每個後續路徑被繪製在前面的路徑之下（+一些填充）。我會認爲這將通過style.top或.attr('y', my_value)完成。然而，這兩者都不適合我。如果沒有做任何事情來解決這個問題，那麼路徑將被繪製在彼此之間，這是不好的。應該是簡單的，但爲了增加透明度，讓我提供的關鍵代碼：

graphGroup.append("path") 
     .datum(data) 
     .attr("fill", "none") 
     .attr("d", line); 

我想我可以程式設計創造的g S N號（即graphGroup2 = svg.append('g').attr('transform', 'translate(' + my_transformation +')')等等，但我覺得應該有一個。更簡單的方法也許動態Y：

//var count = graphGroup....??? 
//count could be a way to count the existing number of paths in the g graphGroup 


    graphGroup.append("path") 
     .datum(data) 
     .attr("fill", "none") 
     .attr('y', count*200) 
     .attr("d", line); 

很顯然，我不知道如何使我的動態方法的工作。如果你認爲它會工作，你可以建立過它，也可以隨時放棄。它贊成另一種方式。

Answer 1

A SVG <path>元素沒有y屬性。您必須使用translate來設置這些路徑的垂直位置。但是，您不必創建其他< g>元素：所有路徑都可以位於同一組中。

這裏是一個演示，在那裏我增加一個循環內count變量的路徑下平移：

var svg = d3.select("body") 
 
    .append("svg") 
 
    .attr("width", 300) 
 
    .attr("height", 300); 
 

 
var d = "M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"; 
 

 
var count = 0; 
 
(function loop() { 
 
    if (count++ > 5) return; 
 
    setTimeout(function() { 
 
    svg.append("path") 
 
     .attr("stroke", "black") 
 
     .attr("d", d) 
 
     .attr("fill", "none") 
 
     .attr("transform", "translate(0," + count * 20 + ")") 
 
    loop(); 
 
    }, 1000); 
 
})();

<script src="https://d3js.org/d3.v4.min.js"></script>