Javascript 无法在d3中进行包布局？选择全部不工作？

我对编码比较陌生，对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”作为圆半径显示气泡，最后在画布上显示五个不同大小的圆。下面是我的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"

错误：属性transform=“translate（NaN，NaN）”的值无效
错误：属性r=“NaN”的值无效

---

任何帮助都将不胜感激！谢谢大家!

您传递的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 }
 ]
}

它应该如下所示，注意关键名称儿童而不是问题

{
 "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 }
 ]
}

---

工作代码。

答案有点晚，但如果您不想更改数据结构，并且希望保留

issues

属性，您可以使用

children（）

调用明确告诉D3使用

issues

属性处理子数据：

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