在D3選擇中的每個對象上應用過渡

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