D3.js 序列森伯斯特，点击更改数据答案

【问题标题】：D3.js Sequence Sunburst, change data on clickD3.js 序列森伯斯特，点击更改数据
【发布时间】：2015-03-05 17:31:57
【问题描述】：

我正在尝试更改此处找到的序列 Sunburst 的数据： http://bl.ocks.org/kerryrodden/7090426

我希望在我单击按钮时将其更改为新的数据集（csv 或 json）。

我尝试读取一个新的 csv，并调用 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);
  });
});

我还尝试使用更新的 json 直接调用 createVisualization(json);。

在这两种情况下我都会收到此错误：Uncaught TypeError: Cannot read property '__data__' of null 其中指的是这行代码：totalSize = path.node().__data__.value;

我还尝试在创建新的 svg 之前删除旧的 svg，但这并没有改变任何东西。

问题：如何更改该旭日形的底层数据（理想情况下从一个数据集到另一个数据集的动画）？

我没有设法制作一个有效的fiddle，所以这是另一个线程的一个（所有代码都在上面的链接中）：http://jsfiddle.net/zbZ3S/（不同的数据 - 使用 json，但应该和上面的链接是一样的代码）

【问题讨论】：

我现在正在努力解决这个相同的问题 - 你有没有设法解决这个问题？谢谢！
我没有解决它，但使用了对同一旭日形的这种角度大修：gist.github.com/chrisrzhou/d5bdd8546f64ca0e4366 使用ng-click="sunburst.selectExample('name_of_your_csv') 为您想要的任何元素添加点击事件。
太好了 - 谢谢！

标签： javascript json csv d3.js sunburst-diagram

【解决方案1】：

我有同样的问题，问题是程序无法获取条目的总大小。如果你可以用另一种方式计算它，你可以这样做： totalSize = XXX ; 用 XXX 来调试它，直到有人找到真正的解决方案。

【讨论】：

【解决方案2】：

通过像这样修改 buildHierarchy 来解决 totalSize：

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;

添加最后一行

【讨论】：

【解决方案3】：

这是我解决这个问题的方法，

首先，制作可视化段参数化：

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

并且，在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);
});
};

别忘了放点东西触发updateData()

在我的例子中，我在主 html 文件中添加了一个按钮：

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

【讨论】：

d3.select("#container").selectAll("path").remove();为我做的