Question

我是d3.js的新手并花了很多时间试图解决这个问题，但都失败了。所以，我在这里寻求你的帮助：

我需要制作一个由两个充满气泡的同心圆组成的气泡图。让我们说，内圈充满了雇主，外圈充满了员工。并且两个圆圈之间应该有一个很小的间距，如边距。

提前谢谢。

example.html的

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        text {
            font: 10px sans-serif;
        }
    </style>
</head>

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script>

        var diameter = 500,
        format = d3.format(",d"),
        color = d3.scale.category10();

        var bubble = d3.layout.pack()
                    .sort(null)
                    .size([diameter, diameter])
                    .padding(3);

        var svg = d3.select("body").append("svg")
                    .attr("width", diameter)
                    .attr("height", diameter)
                    .attr("class", "bubble");

        d3.json("flare2.json", function(error, root) {
            if (error) throw error;

            var node = svg.selectAll(".node")
                        .data(bubble.nodes(classes(root))
                        .filter(function(d) { return !d.children; }))
                        .enter().append("g")
                        .attr("class", "node")
                        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

            node.append("title")
                        .text(function(d) { return d.className + ": " + format(d.value); });

            node.append("circle")
                        .attr("r", function(d) { return d.r; })
                        .style("fill", function(d) { return color(d.packageName); });

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

        // Returns a flattened hierarchy containing all leaf nodes under the root.
        function classes(root) {
            var classes = [];

            function recurse(name, node) {
                if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
                else classes.push({packageName: name, className: node.name, value: node.size});
            }

            recurse(null, root);
            return {children: classes};
        }

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

    </script>

</body>
</html>

flare2.json

{
    "name": "flare",
    "children": [
        {
            "name": "analytics",
            "children": [
                {
                    "name": "cluster",
                    "children": [
                        {"name": "Test1", "size": 1000},
                        {"name": "Test2", "size": 2000},
                        {"name": "Test3", "size": 3000},
                        {"name": "Test4", "size": 1000},
                        {"name": "Test5", "size": 2000},
                        {"name": "Test6", "size": 3000},
                        {"name": "Test7", "size": 1000}

                    ]
                },
                {
                    "name": "graph",
                    "children": [
                        {"name": "Test1", "size": 1000},
                        {"name": "Test2", "size": 2000},
                        {"name": "Test3", "size": 3000},
                        {"name": "Test4", "size": 1000},
                        {"name": "Test5", "size": 2000},
                        {"name": "Test6", "size": 3000},
                        {"name": "Test7", "size": 1000},
                        {"name": "Test8", "size": 2000},
                        {"name": "Test9", "size": 3000},
                        {"name": "Test10", "size": 1000},
                        {"name": "Test11", "size": 2000}
                    ]
                }
            ]
        }
    ]
}

此代码来自我在网上找到的其他示例，因此它远非完美和我需要的。两个同心圆需要像image一样 - 黄色是雇主的内圈，蓝色是雇员的外圈。

d3.js带有气泡的两个同心圆

0 个答案: