D3.js 使用nest（）和rollup循环包布局

我正在尝试使用nest和.rollup创建一个圆形包图。我得到以下错误：

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

---

谢谢阅读。

那么，你想要一个父圈，我们称之为世界，子圈代表每个国家，大小由JSON数组中的条目数决定

d3.json("data/countriesNested.php", function(error, data) {

    var submissionsByCountry = d3.nest()
      .key(function(d) {
        return d.Country;
      })
      .rollup(function(leaves) {
        return leaves.length;
      })
      .entries(data);

    var root = {
      "key": "world",
      "children": submissionsByCountry
    };

    ...

这将为您提供与flare.json非常相似的内容

接下来，你需要给d3一个合适的圆圈大小

var pack = d3.layout.pack()
  .size([diameter - 4, diameter - 4])
  .value(function(d) {
    return d.values; //<-- this comes from your roll-up and is the count.
  });

---

这是一个。

那么，你想要一个父圈，我们称之为世界，子圈代表每个国家的大小，在你的JSON数组中有条目的计数

d3.json("data/countriesNested.php", function(error, data) {

    var submissionsByCountry = d3.nest()
      .key(function(d) {
        return d.Country;
      })
      .rollup(function(leaves) {
        return leaves.length;
      })
      .entries(data);

    var root = {
      "key": "world",
      "children": submissionsByCountry
    };

    ...

这将为您提供与flare.json非常相似的内容

接下来，你需要给d3一个合适的圆圈大小

var pack = d3.layout.pack()
  .size([diameter - 4, diameter - 4])
  .value(function(d) {
    return d.values; //<-- this comes from your roll-up and is the count.
  });

---

下面是一个问题。

您的代码中有一些错误需要修复：

您需要为包布局上的子项和值设置访问器函数：

var pack = d3.layout.pack()
  .size([diameter - 4, diameter - 4])
  .children(function(d) {
    return d.values;  // accessor for children
  })
  .value(function(d) {
    return d.values;  // accessor for values
  });

您的d3.nest返回一个数组，但d3.pack要求您提供一个包含层次结构的根对象。必须创建根对象并将嵌套数组放入其中：

var countryRoot = {
    key: "root",
    values: submissionsByCountry
};

在您的代码中，您将数据嵌套到submissionsByCountry中，但您没有在其他任何地方使用此变量。因此，在将数据绑定到svg时，显然必须引用它。这是由上面提到的根对象完成的，该根对象稍后绑定到svg

包布局添加到数据节点的属性包括值x和y，而您将它们称为cx和cy，它们是属性，但不存在于数据中。因此，您得到了transform=translateundefined、undefined错误消息。您应该使用以下属性：

.attr("transform", function(d) {
  return "translate(" + d.x + "," + d.y + ")";
});

---

我整理了一份工作报告。

您的代码中有一些错误需要修复：

您需要为包布局上的子项和值设置访问器函数：

var pack = d3.layout.pack()
  .size([diameter - 4, diameter - 4])
  .children(function(d) {
    return d.values;  // accessor for children
  })
  .value(function(d) {
    return d.values;  // accessor for values
  });

您的d3.nest返回一个数组，但d3.pack要求您提供一个包含层次结构的根对象。必须创建根对象并将嵌套数组放入其中：

var countryRoot = {
    key: "root",
    values: submissionsByCountry
};

在您的代码中，您将数据嵌套到submissionsByCountry中，但您没有在其他任何地方使用此变量。因此，在将数据绑定到svg时，显然必须引用它。这是由上面提到的根对象完成的，该根对象稍后绑定到svg

包布局添加到数据节点的属性包括值x和y，而您将它们称为cx和cy，它们是属性，但不存在于数据中。因此，您得到了transform=translateundefined、undefined错误消息。您应该使用以下属性：

.attr("transform", function(d) {
  return "translate(" + d.x + "," + d.y + ")";
});

---

我整理了一份工作报告。

非常感谢！访问器函数是我最大的绊脚石。我对上面的解决方案投了接受票，因为它向前迈出了一小步，将组织嵌套在各自的国家和“世界”中，尽管从本质上说，这两种解决方案都回答了我的问题。再次感谢-我感谢你的帮助。非常感谢你的帮助！访问器函数是我最大的绊脚石。我对上面的解决方案投了接受票，因为它向前迈出了一小步，将组织嵌套在各自的国家和“世界”中，尽管从本质上说，这两种解决方案都回答了我的问题。再次感谢-我感谢你的帮助。