Question

我想用d3.js移动一个给定坐标的矩形。过渡的x，y坐标是

[0,0]

[0,30]

[30,60]

[100,0]

所以我编码了

 var svg = d3.select("body").append("svg");
    var coordinate=[
        [0,0],
        [0,30],
        [30,60],
        [100,0],          
        ];
    var square=svg.append("rect")
      .attr("x",coordinate[0][0])
      .attr("y",coordinate[0][1])
      .attr("width",60)
      .attr("height",60);
        
    square.transition()
        .duration(1000)
        .ease("linear")
        .attr("x",coordinate[1][0])
        .attr("y",coordinate[1][1])
        .transition()
        .duration(1000)
        .ease("linear")
        .attr("x",coordinate[2][0])
        .attr("y",coordinate[2][1])
        .transition()    
        .duration(1000)
        .ease("linear")
        .attr("x",coordinate[3][0])
        .attr("y",coordinate[3][1]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

好的，这工作正常，但我必须手工编写所有的链转换。如果阵列变大......我不想考虑它。

我想要做的是将过渡函数应用于第一个元素数组，然后应用于第二个元素，第三个元素，依此类推。我尝试使用for循环，但找不到好的解决方案。

Answer 1

试试这种方式。我使用了forEach方法。您可以使用任何循环功能，例如for或while

var svg = d3.select("body").append("svg");

var coordinate = [
    [0,0],
    [0,30],
    [30,60],
    [100,0],          
];

var square = svg.append("rect")
  .attr("x",coordinate[0][0])
  .attr("y",coordinate[0][1])
  .attr("width",60)
  .attr("height",60);

coordinate.forEach(function(d,i){ 
  if(i>0)
    square = square.transition()
      .duration(1000)
      .ease("linear")
      .attr("x",d[0])
      .attr("y",d[1])
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

d3.js中数组的链转换

1 个答案: