D3 tree&cluster

    <script>

        var svg = d3.select('body')
            .append('svg')
            .attr("width",300)
            .attr('height',300)

        var data = {
        "name":"中国",
        "children":[
            {"name":"河南","children":[{"name":"周口"},{"name":"洛阳"}]},
            {"name":"江苏"}
            ]
        }

        var tree = d3.layout.tree()
                    .size([200,100])
                    .separation((a,b)=>a.parent == b.parent ? 1:2)
        var nodes = tree.nodes(data)
        var links = tree.links(nodes)

        var diagonal = d3.svg.diagonal()
                        .projection((d)=>[d.y,d.x])
        var link = svg.selectAll(".link")
                        .data(links)
                        .enter()
                        .append("path")
                        .attr("class","link")
                        .attr("d",diagonal)

        var node = svg.selectAll(".node")
                        .data(nodes)
                        .enter()
                        .append("g")
                        .attr("class","node")
                        .attr("transform",(d)=>"translate("+d.y+","+d.x +")")
        node.append("circle").attr("r",4.5)
        node.append("text")
            .attr("dx",(d)=>d.children? -8 :8)
            .attr("dy",3)
            .style("text-anchor",(d)=>d.children? "end":"start")
            .text((d)=>d.name)
    </script>