无法在 d3 中进行包布局？ selectAll 不工作？

Question

我对编码比较陌生，对 d3 也很陌生。我目前正在尝试将 d3 与 json 一起使用来制作一个包布局，以表示当前的总统候选人以及他们在反馈过程中谈论某个问题的次数。

我想从小做起，所以我在 .json 文件中制作了一些虚拟数据，如下所示：

{
 "name": "John Doe",
 "party": "democratic",
 "issues": [
  { "issue":"issue1", "value": 25 },
  { "issue":"issue2", "value": 10 },
  { "issue":"issue3", "value": 50 },
  { "issue":"issue4", "value": 40 },
  { "issue":"issue5", "value": 5 }
 ]
}

我想显示以 "issue" 为标签、以 "value" 为圆半径的气泡，最后在我的 canvas 上显示五个不同大小的圆圈。下面是我的 index.html 文件：

var width = 800, height = 600;

var canvas = d3.select("body").append("svg")
 .attr("width", width)
 .attr("height", height)
 .append("g")
  .attr("transform", "translate(50, 50)");

var pack = d3.layout.pack()
 .size([width, height - 50])
 .padding(10);

d3.json("fakedata.json", function (data) {

 var nodes = pack.nodes(data);

 var node = canvas.selectAll(".node")
  .data(nodes)
  .enter()
  .append("g")
   .attr("class", "node")
   .attr("transform", function (d) {
     return "translate(" + d.x + "," + d.y + ")";
   });

 node.append("circle")
  .attr("r", function (d) { return d.r; })
  .attr("fill", "steelblue")
  .attr("opacity", 0.25)
  .attr("stroke", "#ADADAD")
  .attr("stroke-width", "2");

 node.append("text")
  .text(function (d) {
    return d.children ? "" : d.issue;
 });
});

我一直收到以下错误，我认为这是因为节点设置不正确。

 Error: Invalid value for <g> attribute transform="translate(NaN,NaN)"
 Error: Invalid value for <circle> attribute r="NaN"

如有任何帮助，我们将不胜感激！谢谢！

Answer 1

您传递的JSON是

{
 "name": "John Doe",
 "party": "democratic",
 "issues": [
  { "issue":"issue1", "value": 25 },
  { "issue":"issue2", "value": 10 },
  { "issue":"issue3", "value": 50 },
  { "issue":"issue4", "value": 40 },
  { "issue":"issue5", "value": 5 }
 ]
}

应该如下所示，注意键名 children 而不是 issues

{
 "name": "John Doe",
 "party": "democratic",
 "children": [
  { "issue":"issue1", "value": 25 },
  { "issue":"issue2", "value": 10 },
  { "issue":"issue3", "value": 50 },
  { "issue":"issue4", "value": 40 },
  { "issue":"issue5", "value": 5 }
 ]
}

工作代码here.

Answer 2

答案有点晚了，但是如果你不想改变你的数据结构并且你想保留 issues 属性，你可以明确地告诉 D3 使用issues 属性使用 children() 调用的子数据：

var pack = d3.layout.pack()
   .size([width, height - 50])
   .children(function (d) { return d.issues; })
   .padding(10);

无法在 d3 中进行包布局？ selectAll 不工作？

Cannot make a pack layout in d3? selectAll not working?

javascript

json

selectall

nan

d3.js