I am working on a sunburst viz based off of Mike Bostock's Zoomable Sunburst example.

I want to be able to change the underlying data using a whole new JSON (which has the same structure but different 'size' values), and have the sunburst animate a transition to reflect the updated data.

If I change the data of the path elements using .data(), and then attempt to update in the following fashion:

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

(..which is pretty much the exact same code as the click fn)

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

..I find that the sunburst does correctly change to reflect the new data, but it snaps into place rather than smoothly transitioning, like it does when you zoom in.

/ <-- Here is a jsfiddle with the issue isolated (the transition happens one second after you click 'Run')

I'm guessing that I need to create a different arcTween() fn, but my d3 understanding is not there yet. Many thanks!

I am working on a sunburst viz based off of Mike Bostock's Zoomable Sunburst example.

I want to be able to change the underlying data using a whole new JSON (which has the same structure but different 'size' values), and have the sunburst animate a transition to reflect the updated data.

If I change the data of the path elements using .data(), and then attempt to update in the following fashion:

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

(..which is pretty much the exact same code as the click fn)

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

..I find that the sunburst does correctly change to reflect the new data, but it snaps into place rather than smoothly transitioning, like it does when you zoom in.

http://jsfiddle/jTV2y/ <-- Here is a jsfiddle with the issue isolated (the transition happens one second after you click 'Run')

I'm guessing that I need to create a different arcTween() fn, but my d3 understanding is not there yet. Many thanks!

• javascript
• d3.js
• sunburst-diagram

1 Answer 1

Your example is quite similar to the sunburst partition example, which also updates data with a transition. The difference is that in this example it's the same underlying data with different value accessors. This means that you can't save the previous value in the data (as that will be different), but need to put it somewhere else (e.g. the DOM element).

The updated tween function looks like this:

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

This requires, as in the original example, to save the original x and dx values:

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

Complete example here. This one has a kind of weird transition which is cause by the different order of the data in the layout. You can disable that by calling .sort(null), see here.