布局 打包图

打包图,用于表示包含与被包含的关系,也可表示各对象的权重,通常用一圆套一圆来表示前者,用圆的大小来表示后者。

数据

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

  var root = {
    "name":"中国",
    "children":
    [
      { 
        "name":"浙江" , 
          "children":
          [
              {"name":"杭州" },
              {"name":"宁波" },
              {"name":"温州" },
              {"name":"绍兴" }
          ] 
        },
      { 
        "name":"广西" , 
        "children":
        [
          {"name":"桂林"},
          {"name":"南宁"},
          {"name":"柳州"},
          {"name":"防城港"}
        ] 
      }
    ]
  }

布局(数据转换)

var pack = d3.layout.pack()
            .size([ width, height ])
            .radius(30);

接下来,应用布局,获取节点和连线坐标,虽然本文绘图并不使用连线坐标。

  var nodes = pack.nodes(root);
  var links = pack.links(nodes);
  
  console.log(nodes);
  console.log(links);

来看看节点数据是怎样的?

数据被转换后,多了深度信息(depth),半径大小(r),坐标位置(x,y)等。

注意:无论用什么布局,一定要先看看转换后的数据是什么的,然后再使用。

绘制

绘制的内容有圆和文字,分别添加元素即可。

  svg.selectAll("circle")
    .data(nodes)
    .enter()
    .append("circle")
    .attr("fill",function(d){
      return color(d.depth);
    })
    .style("stroke","black")
    .style("stroke-width","1px")
    .style("stroke-opacity",0.3)
    .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(nodes)
    .enter()
    .append("text")
    .attr("font-size","10px")
    .attr("fill","white")
    .style("text-anchor","middle")
    .attr("fill-opacity",function(d){
      if(d.children)
        return 0;
    })
    .attr("x",function(d){ return d.x; })
    .attr("y",function(d){ return d.y; })
    .attr("dy",4)
    .text(function(d){ return d.name; });

结果

源代码

下载地址:pack.zip

在线演示

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

Copyright 2014-2016, DecemberCafe, All Rights Reserved