D3.js Sunburst Sequence, Click-to-Change Data

Question

I am trying to modify the Sequence Sunburst data found here: http://bl.ocks.org/kerryrodden/7090426

I want it to change to a new dataset (csv, or json) when I click the button.

I tried reading the new csv and calling createVisualization(json);:

$('.toggle-data').click( function() {
  d3.text("../csv/new-data.csv", function(text) {
    var csv = d3.csv.parseRows(text);
    var json = buildHierarchy(csv);
    createVisualization(json);
  });
});

I also tried calling createVisualization(json);directly using updated json.

In both cases, I get this error: Uncaught TypeError: Cannot read property '__data__' of null What applies to this line of code:totalSize = path.node().__data__.value;

I also tried removing the old svg before creating a new one, but that did not change anything.

Question: How to change the underlying data of this sunlight (perfectly animating from one data set to another)?

, ( ): http://jsfiddle.net/zbZ3S/ ( - json, , )

Answer 1

, , . , :    totalSize = XXX ; XXX totalSize , - .

Answer 2

totalSize, buildGierarchy :

function buildHierarchy(csv) {
  var root = {"name": "root", "children": []};
  for (var i = 0; i < csv.length; i++) {
      var sequence = csv[i][0];
      var size = +csv[i][1];
      if (isNaN(size)) { // e.g. if this is a header row
          continue;
      }
totalSize = totalSize + size;

Answer 3

,

-, :

d3.text(inputcsvfile, function(text) {
  var csv = d3.csv.parseRows(text);
  var json = buildHierarchy(csv);
  createVisualization(json);
});

, .js

// default sunburst data
var inputcsvfile="olddata.csv";

// function to switch to a new data
function updateData() {
  d3.select("#container").selectAll("path").remove();
  var inputcsvfile="newdata.csv";
  d3.text(inputcsvfile, function(text) {
  var csv = d3.csv.parseRows(text);
  var json = buildHierarchy(csv);
  createVisualization(json);
});
};

-, updateData()

html :

<div id="mybuttons">
    <input name="updateButton1" 
           type="button" 
           value="Change data" 
           onclick="updateData()" />
</div>