4

我正在尝试更改此处找到的序列 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);
  });
});

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

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

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

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

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

4

3 回答 3

2

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

于 2015-01-08T13:14:57.287 回答
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;

添加最后一行

于 2016-08-30T12:29:46.467 回答
2

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

首先，使创建可视化段参数化：

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>
于 2016-10-07T10:13:30.603 回答