利用d3.layout.pack布局

 const width = 700, height = 500, padding = {top: 160, left: 130};
    d3.json("city.json", function (error, data) {

        const svg = d3.select("body").append("svg")
            .attr("width", width + padding.left * 2)
            .attr("height", height + padding.top * 2)
            .append("g")
            .attr("transform", `translate(${padding.left },${padding.top})`);
        const pack = d3.layout.pack()
            .size([width, height])
            .padding(19)
            .radius(20);
        const node = pack.nodes(data);
// node格式 用pack(打包布局)把數(shù)據(jù)轉(zhuǎn)換成相應(yīng)半徑和間距的數(shù)據(jù) 然后直接用圓形繪制即可
      /*   {
            children: (12) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}],
            depth: 0,
            name: "中國",
            r: 404.29107179179675,
            value: 0,
            x: 350,
            y: 250
        }*/
        console.log(node);
        const color = d3.scale.category10();
        svg.selectAll(".circle")
            .data(node)
            .enter()
            .append("circle")
            .attr("class", "circle")
            .style("fill", function (d, i) {
                return color(i);
            })
            .style("opacity", function (d, i) {
                return d.children ? .3 : 1;
            })
            .attr("cx", function (d) {
                return d.x
            })
            .attr("cy", function (d) {
                return d.y
            })
            .attr("r", function (d) {
                return d.r
            });
        svg.selectAll(".text")
            .data(node)
            .enter()
            .append("text")
            .attr("class", "text")
            .style("stroke", "black")
            .style("font-size", "12px")
            .style("opacity", function (d, i) {
                return d.children ? 0 : 1;
            })
            .attr("x", function (d) {
                return d.x
            }).attr("y", function (d) {
            return d.y
        }).attr("dy", ".3em")
            .style("text-anchor", "middle")
            .text(d => d.name)
    });

結(jié)果

pack