D3.transition(). attr ('x', y) не работает, когда d3.attr('x', y)

Следующие работы (круг переместится в новое место в указанной точке)

d3target
  .attr('cx', newCX )
  .attr('cy', newCY )

но это не так:

d3target
  .transition()
  .attr('cx', newCX )
  .attr('cy', newCY )
   // .duration(1000) // Still doesn't work with or without the duration

и не делает этого: (путем предоставления начального значения как предложено документами API)

d3target
  .attr('cx', originalCX )
  .attr('cy', originalCY )
  .transition()
  .attr('cx', newCX )
  .attr('cy', newCY )
   // .duration(1000) // Still doesn't work with or without the duration

Круги не оживляют и не перемещаются. Мы попытались вручную установить dur на 1 секунду, чтобы убедиться, что анимация не заканчивается или пропускается, потому что она слишком мала, чтобы ее можно было заметить или пропустить или что-то подобное.

Мы пробовали и рассмотрели множество возможностей относительно того, почему, поэтому любые мысли о том, почему или что еще нужно попробовать, очень ценятся.

Основная информация для справки:
D3Target выглядит следующим образом, и то, что мы знаем, верно, учитывая, что первый блок кода работает, просто отрегулировав attr напрямую без вызова transition().

d3Target description

Ответы

Ответ 1

Сначала присвойте вам переход (возврат метода перехода) к переменной, затем попробуйте console.log(transition_selection.empty()). Если он ложный, то вы знаете, что у вас есть что-то для перехода.

Вторая попытка: transition_selection.each('start', function(){ console.log('started'); }).each('interrupt', function() {console.log('interrupted');}).each('end', function(){ console.log('ended'); });

Таким образом вы сможете увидеть, был ли начат переход и был прерван.

Третья попытка: transition.attr('cx', function (d) { console.log( 'attr got assigned'); ) });

Таким образом, вы узнаете, было ли прочитано значение, указанное вами для 'cx'.

Собственно попробуйте все вышеперечисленное в том же запуске. Чтобы вы могли видеть, что происходит в каком порядке.

Всегда пытайтесь присвоить вам переходы. d3traget.transition('somename')

Таким образом вы можете запускать много переходов по одному и тому же выделению параллельно. Если вы запускаете несколько "неназванных" переходов на один и тот же выбор, второй переход остановит первый.

Надеюсь, что любое из того, что я вам дал, поможет вам решить вашу проблему. Удачи!

Ответ 2

Переход осуществляется с использованием следующего упрощенного кода:

HTML:

  <svg height='500' width='500'>
        <circle id='circ' cx='50' cy='50' r='10'></circle>   
    </svg>

JS:

var d3target = d3.select('#circ');

d3target
  .transition()
  .attr('cx', 100 )
  .attr('cy', 100 )

fiddle

Это означает, что в коде есть что-то еще, что останавливает переход от работы. Следуя ссылке на ваш код, насколько я вижу, именно здесь происходит переход:

 if(this.parentMeasureModel.get('timesRecorded') !== 0) {
    d3target
      .attr('cx', newCX )
      .attr('cy', newCY )

    setTimeout(function(){
      d3target
        .attr('cx', originalCX )
        .attr('cy', originalCY )
    }, dur);
  // Otherwise we use the standard method
  } else {      
    d3target.transition()
      .attr('cx', newCX )
      .attr('cy', newCY )
      .duration(dur)
      .each('end',function() {                   // as seen above
        d3.select(this).                         // this is the object 
          transition()                           // a new transition!
            .attr('cx', originalCX )    // we could have had another
            .attr('cy', originalCY )    // we could have had another
            .duration(dur);                  // .each("end" construct here.
       });
  }
}

Разница между ними - это переменная dur и каждый метод. Попробуйте использовать фактическое значение для переменной dur и удалить каждый метод. Если это сработает, тогда ваша проблема будет там.