Question

我有一些用户事件附加到svg的不同路径。我想要的是在前一个路径下面绘制每个后续路径（+一些填充）。我认为这可以通过style.top或.attr('y', my_value)来完成。然而，这对我没有用。如果没有采取任何措施来解决这个问题，那么路径就会在彼此之上绘制，这很糟糕。应该是直截了当的，但为了更加清晰，让我提供关键代码：

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

我想我可以通过编程方式创建n个g s，（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

SVG <path>元素没有y属性。您必须使用translate来设置这些路径的垂直位置。但是，您不必创建其他< g>元素：所有路径都可以位于同一组中。

这是一个演示，我在循环中增加count变量以将路径向下转换：

＆＃13;

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);
})();

＆＃13;

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

＆＃13;

D3修改路径的y

1 个答案: