无法在 d3 中制作包布局？全选不起作用？答案

【问题标题】：Cannot make a pack layout in d3? selectAll not working?无法在 d3 中制作包布局？全选不起作用？
【发布时间】：2023-03-26 06:59:01
【问题描述】：

我对编码比较陌生，对 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 }
 ]
}

我想显示带有“问题”作为标签和“值”作为圆半径的气泡，最终在我的画布上显示五个不同大小的圆圈。下面是我的 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"

任何帮助将不胜感激！谢谢！

【问题讨论】：

标签： javascript json d3.js nan selectall

【解决方案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.

【讨论】：

【解决方案2】：

答案有点晚了，但如果您不想更改数据结构并且想要保留 issues 属性，您可以明确告诉 D3 将 issues 属性用于子数据使用children() 电话：

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

【讨论】：