如何获得非重叠的圆形包装 d3 js 图表？

Question

<script type = "text/javascript"> $(document).ready(function () {
    var colorList = [
        'rgb(196, 37, 37)', 'rgb(47, 126, 216)', 'rgb(145, 0, 0)',
        'rgb(242, 143, 67)', 'rgb(26, 173, 206)', 'rgb(73, 41, 112)',
        'rgb(119, 161, 229)', 'rgb(166, 201, 106)', 'rgb(237, 86, 27)',
        'rgb(146, 168, 205)', 'rgb(181, 202, 146)', 'rgb(144, 137, 232)',
        'rgb(164, 125, 124)', 'rgb(96, 188, 179)', 'rgb(86, 97, 54)',
        'rgb(210, 189, 123)', 'rgb(120, 67, 181)', 'rgb(184,0,46)'];

    var json = $ {
        chartMap
    }

    var diameter = 500,
        format = d3.format(",f");

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

    var svg = d3.select("#healthplanChart").append("svg")
        .attr("width", diameter)
        .attr("height", diameter)
        .append("g")
        .attr("transform", "translate(2,2)");
    var root = json;
    var node = svg.datum(root).selectAll(".node")
        .data(pack.nodes)
        .enter().append("g")
        .attr("transform", function (d) {
            return "translate(" + d.x + "," + d.y + ")";
        });

    node.append("title")
        .text(function (d) {
            return d.name + (d.children ? "" : ": " + format(d.size));
        });

    node.append("circle")
        .attr("fill", function (d) {
            var ind = 0;
            for (var i = 0; i < root.children.length; i++) {
                if (root.children[i] == d) {
                    ind = i;
                }
            };
            return d.children ? "rgb(31, 119, 180)" : colorList[ind];
        })
        .attr("fill-opacity", function (d) {
            return d.children ? "rgb(31, 119, 180)" : colorList[1];
        })
        .attr("r", function (d) {
            return d.r;
        });

    node.filter(function (d) {
            return !d.children;
        })
        .append("text")
        .attr("dy", ".3em")
        .style("text-anchor", "middle")
        .text(function (d) {
            return d.name.substring(0, d.r / 3);
        });

    d3.select(self.frameElement).style("height", diameter + "px");
});

JSON:

   {
      "name": "HXYZ",
      "children": [
        {
          "name": "A",
          "size": 828074
        },
        {
          "name": "B",
          "size": 325658.79
        },
        {
          "name": "C",
          "size": 0
        },
        {
          "name": "D",
          "size": 6544.86
        },
        {
          "name": "E",
          "size": 2025.99
        },
        {
          "name": "F",
          "size": 0
        }
      ]
    }

Answer 1

如果确定所需大小的数值为 0，D3 圆包有时不起作用。

因此，对于您的情况，您可以执行以下任一操作：

将 JSON 中的所有 "size": 0 替换为 "size": 1

或

在您的示例中稍微更改此代码段：

来自

.value(function (d) {
    return d.size;
});

到

.value(function (d) {
    return Math.max(d.size, 1);
});

Answer 2

var pack = d3.layout.pack() .sort(function(a, b) { return -(a.value - b.value); }) .size([diameter - 4, diameter - 4]) .value(function(d) { return d.size; });

我做了研究，这段代码帮助我解决了我的问题。如果有人遇到类似问题，我正在分享。谢谢！ :)

如何获得非重叠的圆形包装 d3 js 图表？

How to get an non-overlapped circle packing d3 js chart?

javascript

svg

d3.js

circle-pack