Question

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

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

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

代码的一些部分：

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; })

Answer 1

你几乎拥有它。您的额外属性虽然在d.data：

＆＃13;

<!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>

＆＃13;

d3.pack（）：多个父圆圈，每个圆圈都有一个独特的颜色

1 个答案: