d3.pack()：多个父圆，每个圆都有唯一的颜色答案

【问题标题】：d3.pack(): multiple parent circles each with a unique colord3.pack()：多个父圆，每个圆都有唯一的颜色
【发布时间】：2018-06-29 04:16:42
【问题描述】：

我是 d3 的新手，我想创建一个 d3.pack。我正在寻找代码的教程和示例，但是我发现的所有代码都有一个父圆圈，而我希望其中几个像 image 一样（除了“大陆”圆圈每个都有不同的颜色）。

我想知道如何做到这一点。我是 .js 和 D3 的新手，所以我尝试在 JS 对象中添加另一个第一级项目，但显然它不起作用。

所以现在我正在尝试使用一个单一的第一父母，但使用"fillopacity":"0.0", 以便它是透明的，但我再次无法使其工作。

这是我的try（灵感来自http://d3indepth.com）

部分代码：

var data = {
  "name": "A1",
  "fill": "red",
  "fillopacity":"0.0",
  "children": [
    {
      "name": "B1",
      "fill": "blue",
      "children": [... code cut ...]
     },
    {
      "name": "B2",
      "value": 200,
      "fill": "yellow"
    },
     {
      "name": "B3",
      "value": 200,
      "fill": "green"
    }
  ]
};

d3.select('svg g')
  .selectAll('circle')
  .data(rootNode.descendants())
  .enter()
  .append('circle')
  .attr('cx', function(d) { return d.x; })
  .attr('cy', function(d) { return d.y; })
  .attr('r', function(d) { return d.r; })
  .attr('fill', function(d) { return d.fill; })
  .attr('fill-opacity', function(d) { return d.fillopacity; })

【问题讨论】：

标签： javascript css d3.js layout

【解决方案1】：

你几乎拥有它。不过，您的额外属性位于d.data：

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>Pack layout</title>
</head>


<body>
  <svg width="320" height="320">
    <g></g>
  </svg>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
  <script>
var data = {
  "name": "A1",
  "fill": "red",
  "fillopacity":"0.0",
  "children": [
    {
      "name": "B1",
      "fill": "blue",
      "children": [
        {
          "name": "C1",
          "value": 100,
          "fill": "red"
        },
        {
          "name": "C2",
          "value": 300,
          "fill": "red"
        },
        {
          "name": "C3",
          "value": 200,
          "fill": "red"
        }
      ]
    },
    {
      "name": "B2",
      "value": 200,
      "fill": "yellow"
    },
     {
      "name": "B3",
      "value": 200,
      "fill": "green"
    }
  ]
};

var packLayout = d3.pack()
  .size([300, 300]);

var rootNode = d3.hierarchy(data)

rootNode.sum(function(d) {
  return d.value;
});

packLayout(rootNode);

d3.select('svg g')
  .selectAll('circle')
  .data(rootNode.descendants())
  .enter()
  .append('circle')
  .attr('cx', function(d) { return d.x; })
  .attr('cy', function(d) { return d.y; })
  .attr('r', function(d) { return d.r; })
  .attr('fill', function(d) { return d.data.fill; })
  .attr('fill-opacity', function(d) {
    return d.data.fillopacity;
  })

  </script>
</body>
</html>

【讨论】：

原来如此，可惜不能有几个一级圈子。最后一个问题，我怎么知道 d.data 中有哪些属性？我环顾四周，但找不到解释。
@Enora，d3.pack 操纵耀斑数据以获得位置和半径信息。原始数据结构（传入d3.pack 的内容）保存在.data 属性中。