d3 - солнечные лучи - переход с учетом обновленных данных - пытается оживить, а не привязать

Question

Я работаю над проектом Sunburst, основанным на примере Zoomable Sunburst Майка Бостока.

Я хочу иметь возможность изменять базовые данные, используя совершенно новый JSON (который имеет ту же структуру, но разные значения 'size'), и чтобы солнечные лучи анимировали переход, чтобы отразить обновленные данные.

Если я изменю данные элементов пути с помощью.data(), а затем попытаюсь обновить следующим образом:

path.data(partition.nodes(transformed_json))
    .transition()
    .duration(750)
    .attrTween("d", arcTween(transformed_json));

(..это в значительной степени тот же код, что и щелчок fn)

function click(d) {
   path.transition()
       .duration(750)
       .attrTween("d", arcTween(d));
}

..Я нахожу, что солнечные лучи корректно меняются, отражая новые данные, но вместо того, чтобы плавно переходить, они фиксируются на месте, как это происходит при увеличении масштаба.

http://jsfiddle.net/jTV2y/ <- это jsfiddle с изолированной проблемой (переход происходит через одну секунду после нажатия кнопки "Выполнить")

Я предполагаю, что мне нужно создать другой arcTween() fn, но мое понимание d3 еще не достигнуто. Большое спасибо!

Answer 1

Ваш пример очень похож на пример раздела Sunburst, который также обновляет данные с переходом. Разница заключается в том, что в этом примере это одни и те же базовые данные с различными методами доступа. Это означает, что вы не можете сохранить предыдущее значение в данных (поскольку оно будет другим), но вам нужно поместить его в другое место (например, элемент DOM).

Обновленная функция анимации выглядит следующим образом:

function arcTweenUpdate(a) {
  var i = d3.interpolate({x: this.x0, dx: this.dx0}, a);
  return function(t) {
    var b = i(t);
    this.x0 = b.x;
    this.dx0 = b.dx;
    return arc(b);
  };
}

Это требует, как в оригинальном примере, чтобы сохранить оригинал x а также dx ценности:

.enter().append("path")
.each(function(d) {
      this.x0 = d.x;
      this.dx0 = d.dx;
  });

Полный пример здесь. У этого есть своего рода странный переход, который вызван различным порядком данных в макете. Вы можете отключить это, позвонив .sort(null)смотрите здесь.