基于diagonal生成器的cluster布局

来源：互联网发布：程序员怎么面试编辑：程序博客网时间：2024/06/05 03:16

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>

最后效果：

这里写图片描述

阅读全文

0 0