d3.js学习笔记（五）（打包图与冒泡图）

最新推荐文章于 2024-08-21 08:32:13 发布

蓝天上的一朵云

最新推荐文章于 2024-08-21 08:32:13 发布

阅读量1.3k

点赞数

分类专栏：其它

本文链接：https://blog.csdn.net/u012846041/article/details/83011993

版权

本文是d3.js学习系列的第五篇，主要探讨了打包图和冒泡图的实现。打包图用于展示数据的包含关系，而冒泡图作为其特殊形式，层次为一级，没有子节点。通过实例解析这两种图表的绘制方法。

摘要由CSDN通过智能技术生成

打包图仅表示数据间包含关系，打包图如下示例：

  var width = 500;
        var height = 500;

//================设置打包图布局=======================
        var pack = d3.layout.pack()
            .size([width, height])
            .radius(20);

        if (svg == undefined)
        {
            svg = d3.select("body").append("svg")
                .attr("width", width)
                .attr("height", height)
                .append("g")
                .attr("transform", "translate(0,0)");
        }

        //==================读取json数据并反序列化为对象===========================
        d3.json("../data/city.json", function (error, root) {

            //====================创建打包图的所有节点（节点包含了节点名称，节点间父子关系、节点的坐标位置等信息）==============================
            var nodes = pack.nodes(root);
            //====================创建节点关系=======================