d3.pack（）：多個父圓圈，每個圓圈具有唯一的顏色

Question

我是d3的新手，我想創建一個d3.pack。 我正在尋找教程和代碼示例，但是我發現的所有代碼都有一個父圓，而我希望其中的幾個像在此圖像上一樣（除了“大陸”圓每個都有不同的顏色）。

我不知道該怎么做。 我是.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 ：

 <!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 dx; }) .attr('cy', function(d) { return dy; }) .attr('r', function(d) { return dr; }) .attr('fill', function(d) { return d.data.fill; }) .attr('fill-opacity', function(d) { return d.data.fillopacity; }) </script> </body> </html>

d3.pack（）：多個父圓圈，每個圓圈具有唯一的顏色

問題描述

1 個解決方案

解決方案1
1 已采納 2018-01-20 14:09:33

d3.pack（）：多個父圓圈，每個圓圈具有唯一的顏色

問題描述

1 個解決方案

解決方案1 1 已采納 2018-01-20 14:09:33

解決方案1
1 已采納 2018-01-20 14:09:33