圆形集群图

利用集群布局(cluster)和放射对角线(svg.diagonal.radial)生成

 d3.json("city.json", function (err, data) {
        const width = 700, height = 800, padding = {top: 60, left: 30};
        const svg = d3.select("body").append("svg")
            .attr("width", width + padding.left * 2)
            .attr("height", height + padding.top * 2);
        const container = svg.append("g")
            .attr("transform", "translate(350,400)");
//        创建布局器
        const cluster = d3.layout.cluster()
        //            第一个参数用来生成范围内的x(角度)  第二个参数用来生成范围内的y(半径)
            .size([360, width / 2 - 100])
            .separation(function (a, b) {
                return (a.parent === b.parent ? 1 : 1) / a.depth;
            });
//        生成节点
        const nodes = cluster.nodes(data);
//        生成连接数组
        const links = cluster.links(nodes);
        const color = d3.scale.category20();
//        放射性对角线 需要{source:[radius,angle],target:[radius,angle]}
        const diagonal = d3.svg.diagonal.radial()
            .projection(function (d) {
                const radius = d.y,
//                把角度转换成弧长比例
                    angle = d.x / 180 * Math.PI;
                return [radius, angle];
            });
        container.selectAll(".line")
            .data(links)
            .enter()
            .append("path")
            .attr("d", diagonal)
            .attr("fill", "none")
            .attr("stroke", "purple")
            .attr("stroke-width", 2);
        const legend = container.selectAll(".legend")
            .data(nodes)
            .enter()
            .append("g")
            .attr("class", "legend")
            .attr("transform", function (d) {
                return "rotate(" + (d.x - 90) + ")" + "translate(" + d.y + ")";
            });
        legend.append("circle")
            .attr("r", 6)
            .attr("fill", function (d, i) {
                return color(i);
            });
        legend.append("text")
            .attr("text-anchor", function (d, i) {
                return d.x < 180 ? "start" : "end"
            }).attr("transform", function (d) {
            return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"
        }).text(function (d) {
            return d.name;
        })
    })

结果:

image.png