Question

我在理解如何获取选择中的每个D3对象以应用过渡方面遇到麻烦。考虑以下代码（在jsfiddle上）：

var svg = d3.select('svg');

var dataSet = [10, 20, 30, 40];

var circle = svg.selectAll('circle')
    .data(dataSet)
    .enter()
    .append('circle')
    .attr("r",function(d){ return d })
    .attr("cx", function(d, i){ return i * 100 + Math.random()*50 })
    .attr("cy",50)
    .attr("fill",'red')
   ;

circle.each(function(d,i) {
    this
  .transition()
  .duration(1000)
  .attr("cx",this.cx+100);
})

我对this的使用是错误的。我也尝试过使用d3.select(this)，但是我得到了与D3对象相对应的dom对象。我无法获得D3对象来应用过渡。

Answer 1

缺少的部分是，您可以在使用过渡时向.attr('cx', function (d,i) { ... })提供一个函数，而在该函数内部，您可以使用cx访问this.getAttribute('cx')属性。

当然，您还需要确保使用parseInt()将其转换为数字，否则它将进行字符串连接（因为JS，请叹气）。

因此将您的最后一行更改为：

circle.transition().duration(1000).attr('cx', function(d, i) {
  return parseInt(this.getAttribute('cx')) + 100;
});

在D3选择中的每个对象上应用过渡

1 个答案: