javascript - D3.js Sequence Sunburst, change data on click - Stack Overflow

admin管理员组

文章数量:1406349

I'm trying to change the data of the Sequence Sunburst found here:

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

I tried reading a 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 with an updated json.

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

I also tried removing the old svg before creating the new one, but that didn't change anything.

Question: How can I change the underlaying data of that sunburst (ideally animating from one dataset to another)?

I didn't manage to make a working fiddle, so here is one from another thread (all the code is in the above link though): / (different data - using json, but should be the same code as the link above)

I'm trying to change the data of the Sequence Sunburst found here: http://bl.ocks/kerryrodden/7090426

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

I tried reading a 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 with an updated json.

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

I also tried removing the old svg before creating the new one, but that didn't change anything.

Question: How can I change the underlaying data of that sunburst (ideally animating from one dataset to another)?

I didn't manage to make a working fiddle, so here is one from another thread (all the code is in the above link though): http://jsfiddle/zbZ3S/ (different data - using json, but should be the same code as the link above)

• javascript
• json
• csv
• d3.js
• sunburst-diagram

Share Improve this question Follow edited Jan 8, 2015 at 21:35 VividD 10.5k88 gold badges6666 silver badges112112 bronze badges asked Jan 7, 2015 at 18:15 Christopher SiegelChristopher Siegel 5111 silver badge22 bronze badges 2

• I'm wrestling with this identical issue right now - did you ever to manage to solve this? Thanks! – Gavin Commented Jan 15, 2015 at 18:53
• 1 I didn't solve it, but used this angular overhaul of the same sunburst: gist.github./chrisrzhou/d5bdd8546f64ca0e4366 Use ng-click="sunburst.selectExample('name_of_your_csv') to add an click event to any element you want. – Christopher Siegel Commented Jan 21, 2015 at 16:02

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Here is how I solved this issue,

First, made create visualization segment parametric:

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

And, added this at the beginning of the sequences.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);
});
};

Do not forget to put something to trigger updateData()

In my case, I added a button to the main html file as:

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

I have the same problem and the problem is that the program fail get the totalsize of entries. If you can calculate it another way you can do : totalSize = XXX ; with XXX the totalSize to debug it until someone find a real solution.

solve the totalSize by modifying the buildHierarchy like so:

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;

add last line

本文标签： javascriptD3js Sequence Sunburstchange data on clickStack Overflow