D3.hierarchy返回NaN'r'值-Circle Packing

时间:2018-10-17 15:48:15

标签: javascript d3.js svg data-visualization circle-pack

我正在学习D3,并尝试通过以下链接重新创建圆包装代码: https://bl.ocks.org/mbostock/7607535

区别在于我要从csv导入数据(以下示例):

Name, Rating, Boss, Bossboss
Name1, 1, BossName, Bossbossname
Name2, 3, BossName, Bossbossname

代码如下:

var rowConverter = function(d) {
  return {
    name: d.Name,
    value: parseInt(d['Rating']),
    Boss: d['Boss'],
    Bossboss: d['Bossboss']
  };
}

var pack = d3.pack()
  .size([diameter - margin, diameter - margin])
  .padding(2);


d3.csv("data.csv", rowConverter, function(data) {
  entries = d3.nest()
  .key(function(d) {
    return d.Bossboss;
  })
  .key(function(d) {
    return d.Boss;
  })
  .entries(data);


  var root = {
    name: "root",
    children: entries
  };

  root = d3.hierarchy(root)
  .sum(function(d) {
    return d.size;
  })
  .sort(function(a, b) {
    return b.value - a.value;
  });
} 

这将创建节点,该节点的数据以分层方式完美地填充在其中。但是,每个节点的半径均为Nan。有人可以解释一下这里出了什么问题吗?

编辑:看起来它比NaN的“ r”属性更糟。仅根节点具有填充的x和y属性。内部节点的所有x,y和r属性均具有NaN。

谢谢。

0 个答案:

没有答案