对 D3 选择中的每个对象应用过渡答案

【问题标题】：apply a transition on each object in a D3 selection对 D3 选择中的每个对象应用过渡
【发布时间】：2019-01-04 05:12:50
【问题描述】：

我无法理解如何让选择中的每个 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);
})

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

【问题讨论】：

this 是元素（不是选择），因此您可以使用 d3.select(this).transition() 启动转换 - 但不清楚为什么要使用 .each，因为转换是使用 selection.transition() 时为每个元素制作：jsfiddle.net/dtc8feay
@Andrew，你是对的。如果我可以使用 selectAll(..).transition()，我会这样做。但是我需要访问圆圈的 .cx 属性，因为在我的真实情况下，每个转换都有不同的参数。我已根据此类需求更新了我的问题。

标签： javascript d3.js each

【解决方案1】：

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

当然，你也要确保用parseInt()转成数字，否则会做字符串拼接（因为JS，sigh）。

所以将你的最后一行更改为：

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

【讨论】：