布局 分区图

分区图,是一个很有意思的布局。可以做成方形也可能做成圆形,本文讲解方形分区图的制作方法,这也是最基本的形式。

分区图也是用于表示包含与被包含关系的。

数据

本文使用的数据如下,这是各城市所属关系的数据。

{
"name":"中国",
"children":
[
    { 
      "name":"浙江" , 
      "children":
      [
            {"name":"杭州" },
            {"name":"宁波" },
            {"name":"温州" },
            {"name":"绍兴" }
      ] 
    },
    
    { 
        "name":"广西" , 
        "children":
        [
            {
            "name":"桂林",
            "children":
            [
                {"name":"秀峰区"},
                {"name":"叠彩区"},
                {"name":"象山区"},
                {"name":"七星区"}
            ]
            },
            {"name":"南宁"},
            {"name":"柳州"},
            {"name":"防城港"}
        ] 
    },
    
    { 
        "name":"黑龙江",
        "children":
        [
            {"name":"哈尔滨"},
            {"name":"齐齐哈尔"},
            {"name":"牡丹江"},
            {"name":"大庆"}
        ] 
    },
    
    { 
        "name":"新疆" , 
        "children":
        [
            {"name":"乌鲁木齐"},
            {"name":"克拉玛依"},
            {"name":"吐鲁番"},
            {"name":"哈密"}
        ]
    }
]
}

布局(数据转换)

var partition = d3.layout.partition()
      .sort(null)
      .size([width,height])
      .value(function(d) { return 1; });

接下来读取并转换数据,代码如下。

d3.json("city_tree.json", function(error, root) {
  if(error)
    console.log(error);
  console.log(root);

        //转换数据
  var nodes = partition.nodes(root);
  var links = partition.links(nodes);
        
        //输出转换后的顶点
  console.log(nodes);
}

转换后的数据如下。

顶点中增加了几个变量,其中:

绘制

绑定节点数据,分别添加矩形和文字,代码如下。

  var rects = svg.selectAll("g")
          .data(nodes)
          .enter().append("g");
  
  rects.append("rect")
    .attr("x", function(d) { return d.x; })    // 顶点的 x 坐标
    .attr("y", function(d) { return d.y; })    // 顶点的 y 坐标
    .attr("width", function(d) { return d.dx; })  // 顶点的宽度 dx
    .attr("height", function(d) { return d.dy; })  //顶点的高度 dy
    .style("stroke", "#fff")
    .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
    .on("mouseover",function(d){
      d3.select(this)
        .style("fill","yellow");
    })
    .on("mouseout",function(d){
      d3.select(this)
        .transition()
        .duration(200)
        .style("fill", function(d) { 
          return color((d.children ? d : d.parent).name); 
        });
    });
    
  rects.append("text")  
    .attr("class","node_text")
    .attr("transform",function(d,i){
      return "translate(" + (d.x+20) + "," + (d.y+20) + ")";
    }) 
    .text(function(d,i) {
      return d.name; 
    });

请结合注释,体会转换后的数据是怎么运用的。

结果

源代码

下载地址:partition.zip

在线演示

委托名片直接发送邮件(需邮箱客户端)点击复制邮箱地址14721230383项目委托、技术支持,欢迎与我们联系。休息日7:00 ~ 11:0012:00 ~ 22:00工作日11:00 ~ 11:4016:00 ~ 22:00

Copyright 2014-2016, DecemberCafe, All Rights Reserved