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

Я работаю над sunburst viz на основе Майка Бостока Масштабируемый Sunburst пример.

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

Если я изменю данные элементов пути, используя .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));
}

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

http://jsfiddle.net/jTV2y/

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

1 ответов


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

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

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) см. здесь.