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的源码详解