【 D3.js 入门系列 — 9.6 】 打包图的制作

本文介绍打包图的制作,使用 Layout 来转换数据。

pack

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

1. 数据

本文所使用的数据:  city2.json

这是各城市所属关系的数据。

2. 布局(数据转换)

第 1 行:打包图的布局
第 2 行:size() 设定转换的范围,即转换后顶点的坐标(x,y),都会在此范围内。
第 3 行:radius() 设定转换后最小的圆的半径。

下面是读取数据并转换的代码:

上面用 pack 函数分别将数据转换成了顶点 nodes 和 连线 links。

来看看顶点数据被转换成了什么样:

962

数据被转换后,多了深度信息(depth),半径大小(r),坐标位置(x,y)等。我没有贴 links 的图片,因为我们此节并不对连线进行绘制。

注意:无论用什么 Layout 来转换数据,一定要先看转换后的数据是什么再绘制,否则很容易出错。

3. 绘制

绘制的内容有圆和文字,都在 SVG 中绘制。代码如下:


看过前几章的朋友一定已经很熟悉了吧。

4. 结果

完整代码,请点击下面的链接,再右键点击查看源代码:


文档信息


【 D3.js 入门系列 — 9.6 】 打包图的制作》上有15条评论

  1. 请问json数据应该放在什么位置才能被网页引用呢?是在同一目录下就可以吗

  2. 老师,如何用力学图实现自动布局后固定位置,并且固定位置后,将坐标点传给后台保存,并且下次读取页面时,自动根据上次保存的位置进行布局。
    具体的例子给一个,麻烦老师了

    • 你好。
      关于顶点固定的问题,参见:http://www.ourd3js.com/wordpress/606
      主要是利用顶点的 fixed 属性。

      然后是传送给后台保存,可学习一下 ajax ,异步上传数据是可能的。
      可以在:http://javascript.ruanyifeng.com/bom/ajax.html
      学习。

      谢谢关注,如有问题请告诉我。

  3. 请问,pack图的数据来源只能是json格式吗

  4. 以下代码输入后为无法加载数据,显示NAN
    var height = 500,
    width = 500;
    var svg = d3.select(“body”)
    .append(“svg”)
    .attr(“height”,height)
    .attr(“width”,width);

    var pack = d3.layout.pack()
    .size([width,height])
    .radius(20);
    ;
    d3.json(“./json/visit.json”,function(error,root){
    var nodes = pack.nodes(root);
    var links = pack.links(nodes);
    console.log(nodes);
    console.log(links);
    })
    Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]0: Objectchildren: Array[4]
    depth: 0name: “中国”
    r: NaN
    value: 0
    x: NaN
    y: NaN

    • 上面的问题有误。
      若无 pack变量后的radius()函数 则显示NaN

      • radius 是设置打包图中最小的圆的半径,必须要设置。

        PS:如果不设置,自动使用 value 访问器所指定的 value 值。

  5. 你好, 如果想控制内圈的圆显示的顺序,如何控制?

    • 打包图布局里有一个 sort 函数,可用于将内圈的圆排序。但是你需要指定排序的规则和使用的数据。

      函数定义参见:https://github.com/mbostock/d3/wiki/Pack-Layout#sort

      谢谢

  6. 您好,请问如何为circle加上您引用的例图里面的border呢?

    • 您好,您指的是添加样式吗?

      使用
      circle {
      fill: rgb(31, 119, 180);
      fill-opacity: .25;
      stroke: rgb(31, 119, 180);
      stroke-width: 1px;
      }
      给 circle 元素添加此样式即可。stroke是轮廓线的颜色,stroke-width是轮廓线的宽度。
      谢谢。

评论已关闭。