Question

我试图更改此处找到的序列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，但这并没有改变任何内容。

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

我没有设法使用小提琴，所以这里是另一个线程中的一个（所有代码都在上面的链接中）：http://jsfiddle.net/zbZ3S/（不同的数据 - 使用json，但应该与上面的链接代码相同）

Answer 1

我有同样的问题，问题是程序失败得到条目的总数。如果你可以用另一种方式计算它： totalSize = XXX ;使用XXX的totalSize进行调试，直到有人找到真正的解决方案。

Answer 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;

添加最后一行

Answer 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.js序列Sunburst，点击更改数据

3 个答案: