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>