基于diagonal生成器的cluster布局

1.diagonal生成器

diagonal生成器是路径生成器的一种，需要的数据形式是

var data = [
                {A:{x:100,y:100},
                    B:{x:200,y:200}},
                {A:{x:200,y:200},
                    B:{x:300,y:100}},
            ];

上边的相当于一条diagonal线条，通过source和target访问器我们可以深入到内部，灵活指定x，y的坐标


var diagnal = d3.svg.diagonal()
                    .source(function(d,i){       //自定义访问器函数，但其实我们一般在数据中target source
                        return d.A;
                    })
                    .target(function(d,i){
                        return d.B;
                    });

2.cluster布局

cluster布局，pie布局，chord布局他们的作用一样，我们用布局将数据包裹，会生成线生成器所需要的数据

//root是传进来的数据
  var nodes = cluster.nodes(root);  //生成节点对象
  var links = cluster.links(nodes);//连线对象

  console.log(nodes);
  console.log(links);

nodes
这里写图片描述
links

nodes字典中有children，depth，name，x，y，5个一级属性，在children字段内还有二级属性，指出了children都有哪些结点
links字典中，source与target为他的一级属性，source中种属性与上边每个nondes的字段一样，因为每个source也是一个点。
最后，有了source与target就有了diagonal路径生成器所需要的数据，就可以生成diagonal线条了。而nodes中有x，y坐标我们就可以将数据绑定在circl上了，设定circle的坐标大小等等。
—-读取文件数据格式：

{
"name":"中国",
"children":
[
    { 
      "name":"浙江" , 
      "children":
      [
            {"name":"杭州" },
            {"name":"宁波" },
            {"name":"温州" },
            {"name":"绍兴" }
      ] 
    },

    { 
        "name":"广西" , 
        "children":
        [
            {"name":"桂林"},
            {"name":"南宁"},
            {"name":"柳州"},
            {"name":"防城港"}
        ] 
    },

    { 
        "name":"黑龙江",
        "children":
        [
            {"name":"哈尔滨"},
            {"name":"齐齐哈尔"},
            {"name":"牡丹江"},
            {"name":"大庆"}
        ] 
    },

    { 
        "name":"新疆" , 
        "children":
        [
            {"name":"乌鲁木齐"},
            {"name":"克拉玛依"},
            {"name":"吐鲁番"},
            {"name":"哈密"}
        ]
    }
]
}

3.完整代码

<style>

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.node {
  font: 12px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

</style>
  </head> 
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var width = 500,
    height = 500;

var cluster = d3.layout.cluster()
    .size([width, height - 200]);

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; })
    // .source(function(d,i){
    //     return [d.source.y,d.source.x];
    //   })
    //   .target(function(d,i){
    //     return [d.target.y,d.target.x];
    //   })

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(40,0)");



d3.json("city.json", function(error, root) {

  var nodes = cluster.nodes(root);  //生成节点对象
  var links = cluster.links(nodes);//连线对象

  console.log(nodes);
  console.log(links);

  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", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

  node.append("circle")
      .attr("r", 4.5);

  node.append("text")
      .attr("dx", function(d) { return d.children ? -8 : 8; })
      .attr("dy", 3)
      .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
      .text(function(d) { return d.name; });
});


</script>

最后效果：

这里写图片描述