D3.js中Circle Packing详解

Posted wan353694124

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了D3.js中Circle Packing详解相关的知识,希望对你有一定的参考价值。

Circle Packing

今天来聊一聊Circle Packing,Circle Packing是通过一个个包含与被包含的圆组成,通过这种“包含”来表示类似树形结构所体现的层次关系;而且Circle Packing可以通过圆的大小、颜色来表示节点的权重等信息,总的来说,表现力不错。
先上张来自官网的靓照:

下面来详细解释D3.js官网是怎么实现Circle Packing图的。

index.html——源码

<!DOCTYPE html>
<meta charset="utf-8">
<style>

    circle 
        fill: rgb(31, 119, 180);
        fill-opacity: .25;
        stroke: rgb(31, 119, 180);
        stroke-width: 1px;
    

    .leaf circle 
        fill: #ff7f0e;
        fill-opacity: 1;
    

    text 
        font: 10px sans-serif;
        text-anchor: middle;
    

</style>
<svg width="960" height="960"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

    // 定义一个svg画布
    var svg = d3.select("svg"),

        // 以svg画布的宽度来作为直径的长度
        diameter = +svg.attr("width"),

        // 定义一个组元素,并将其移动定位
        g = svg.append("g").attr("transform", "translate(2,2)"),

        // 定义一个格式化函数,该格式化函数将返回参数的整数部分
        format = d3.format(",d");


    // 创建一个包布局,返回包布局函数pack()
    var pack = d3.pack()

        // 设置包布局的宽、高尺寸
        .size([diameter - 4, diameter - 4]);

    // 数据处理
    d3.json("flare.json", function(error, root) 
        if (error) throw error;

        // d3.hierarchy函数用来从层次型的数据构造根节点root及其递归的下属节点,计算并为每个节点添加
        // depth,height,parent,value属性
        root = d3.hierarchy(root)

            // 对每一个父节点来说,将其所有子节点的size属性的值相加,作为该父节点的value的值,叶子节
            // 点的size值作为其value值
            .sum(function(d)  return d.size; )

            // 对节点按照value属性值进行排序
            .sort(function(a, b)  return b.value - a.value; );

        // 定义节点元素
        var node = g.selectAll(".node")

            // pack(root)函数为root节点及其递归的下属节点计算并添加r,x,y属性,r用来确定节点半径的
            // 大小,x,y用来确定节点的位置
            // desentdants()函数返回树形结构的数据中的所有节点组成的数组
            // 此处为节点绑定数据
            .data(pack(root).descendants())
            .enter().append("g")

            // 父节点和叶子节点的样式设定
            .attr("class", function(d)  return d.children ? "node" : "leaf node"; )

            // 根据节点的x,y来确定其摆放的位置
            .attr("transform", function(d)  return "translate(" + d.x + "," + d.y + ")"; );

        // 为节点添加title属性,即鼠标悬浮显示的信息
        node.append("title")
            .text(function(d)  return d.data.name + "\\n" + format(d.value); );

        // 根据节点的r属性值来绘制代表节点的圆
        node.append("circle")
            .attr("r", function(d)  return d.r; );

        // 若为叶子节点,则添加文字标签
        node.filter(function(d)  return !d.children; ).append("text")
            .attr("dy", "0.3em")
            .text(function(d)  return d.data.name.substring(0, d.r / 3); );
    );

</script>

至此,Circle Packing图解释完毕,不得不说,D3.js中强大的布局函数为完成一张图做了非常多的事情,以致于实现一张看似困难的图变得非常容易。

以上是关于D3.js中Circle Packing详解的主要内容,如果未能解决你的问题,请参考以下文章

D3.js 实现Sequences sunburst的源码详解

D3.js 实现Sequences sunburst的源码详解

当我在d3.js中执行.data(数据)时,如何跳过数组元素

D3.js 绘制散点图

d3.js v4将视口移动到特定节点

D3.js 使用函数时如何应用多个类