применить переход к каждому объекту в выделении D3 - PullRequest
Новая
       10

применить переход к каждому объекту в выделении D3

0 голосов
/ 03 января 2019

У меня проблемы с пониманием, как заставить каждый объект 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), но я получаю объект DOM, соответствующий объекту D3.Я не могу заставить объект D3 применить переход.

1 Ответ

0 голосов
/ 04 января 2019

Недостающая часть заключается в том, что вы можете предоставить функцию для .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;
});
...