D3库实践笔记之几类特定图表与布局 |可视化系列37
布局(Layout)可以看成是D3对图形元素的一种排布方式，在绘制柱状图时，是在横平竖直的直角坐标系下，确定矩形的左上角坐标，就可以画出随着高度变化的一系列柱子，以体现数据值的差异，而如果要画饼图呢，有一列数据[30,10,6]，映射到饼图的不同楔形里，是一个个手动计算角度和初始位置么？根据图形语法，只需要将坐标系变成极坐标，一系列数据很容易对应为角度。
布局和比例尺一样，也属于一种映射，能够将我们提供的数据重新映射/变换成新格式，以便于在某些更特定的图表中的使用。
饼图布局
在v3.x版本中，d3的布局在d3.layout接口下，通过d3.layout.pie()创建一个饼状图布局，而到v5x及最新的v6之后，是d3.pie()，不再使用d3.layout系列，在控制台输入d3.layout 是undefined。在使用饼图布局后，不需要把SVG整个画布的坐标系转成极坐标系，而是将系列数据做转换。
对于一个数组dataset = [76,37,90,60,50]，通过arcs=d3.pie()(dataset)转换成适合生成饼图的格式，在套上前几篇都用过的生成svg和添加形状的框架，一个饼图就诞生了。传入arcs绘制每个楔形用的是SVG的<path>标签。
d3-pie
绘制饼图的具体代码如下：
var dataset = [76,37,90,60,50]; //要绘制的数据
var cls=["#F3D2AC","#F3B8B1","#CC99CC","#7DC8CA","#CAE9E0"];
var outerRadius = 500/2, innerRadius = 0;
var arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius);
//var arcs=d3.pie()(dataset);
var pie = d3.pie().sort(null);
var arcs=pie(dataset); //不使用排序
var svg = d3.select("body")
.append("svg")
.attr("width",'600')
.attr("height",'500')
//为每个要绘制的扇形创建新的分组( g ), 并进行数据绑定
var a= svg.selectAll("g.arc")
.data(arcs)
.enter()
.append("g")
.attr("class", "arc")
.attr("transform", "translate(" + outerRadius + ", " + outerRadius
+ ")");
a.append("path") //绘制每个楔形
.attr("fill",function(d, i) {return cls[i];})
.attr("d", arc);
a.append("text") //添加文本标签
.attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.text(d => d.value);直接使用d3.pie()(dataset)得到的数据序列arcs绘制的饼图是经过排序的，饼图效果是从12点钟开始第一个楔形，顺时针从大到小排列，从上图也可看出，数据的索引没变，arcs[0]还是76，但起始角度为0的数据是90，因此可以重写一下pie函数pie = d3.pie().sort(null)，会按照数据的顺序排列饼图的每个楔形。实际中使用排序还是没排序的效果根据需求选择。innerRadius设置为0是饼图，当其大于0可以得到环状图。outerRadius可以理解为整个图表的半径，因为生成的SVG是[600,500]像素，因此把outerRadius设置为高度的一半，绘制的饼图效果较好。
饼图还有两个实用的参数是cornerRadius和padAngle，
•cornerRadius：应用在d3.arc()上，设置每个楔形弧段边缘的圆角效果，类似于<rect>标签的rx属性，rx用来绘制圆角矩形；•padAngle：应用在d3.pie()上，设置每个楔形排列的间隔；
调整这三个参数生成的“饼图”，效果如下：
d3-pie-inner-radius
堆叠布局
用d3.stack()将数据变成适合堆叠图的数据格式。
//初始数据
var data=[{"y":76,"z":37},{"y":37,"z":46},
{"y":90,"z":53},{"y":60,"z":81},{"y":50,"z":60}];
var stack= d3.stack()
.keys(["y", "z"]);
var ds=stack(data);
//输出的ds：
// [[[0,76],[0,37],[0,90],[0,60],[0,50]],
// [[76,113],[37,83],[90,143],[60,141],[50,110]] ]基于这一格式的数据就可以绘制堆叠柱状图以及垂直的堆叠条形图。
d3-stack-bar
直方图
将序列数据处理为适合直方图的形式用d3.bin()。
var data=[5.1, 4.9, 8.6, 6.2, 5.1, 7.1, 6.7, 6.1, 5, 5, 5.2, 7.9, 10.5, 5.9, 5.5, 5.6, 6.5, 7.7, 5.7, 6.5, 6.1, 5, 5, 5.2, 7.9,6.7];
var bins= d3.bin().thresholds(10)(data);
var margin = ({top: 20, right: 20, bottom: 30, left: 40});
var x = d3.scaleLinear()
.domain([bins[0].x0, bins[bins.length - 1].x1])
.range([40, 400]);
var y = d3.scaleLinear()
.domain([0, d3.max(bins, d => d.length)]).nice()
.range([470,20]);
xAxis = g => g
.attr("transform", `translate(0,${470})`)
.call(d3.axisBottom(x).ticks(500 / 80 ).tickSizeOuter(0))
.call(g => g.append("text")
.attr("x", 450).attr("y", -4)
.attr("fill", "currentColor")
.attr("font-weight", "bold")
.attr("text-anchor", "end")
.text(data.x));
yAxis = g => g
.attr("transform", `translate(${40},0)`)
.call(d3.axisLeft(y).ticks(500/ 80))
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", 4).attr("text-anchor", "start")
.attr("font-weight", "bold").text(data.y));
var svg = d3.select("body").append("svg")
.attr("width",'600').attr("height",'500');
svg.append("g")
.attr("fill", "steelblue")
.selectAll("rect").data(bins).join("rect")
.attr("x", d => x(d.x0) + 1)
.attr("width", d => Math.max(0, x(d.x1) - x(d.x0) - 1))
.attr("y", d => y(d.length)).style("fill","#1EAFAE")
.attr("height", d => y(0) - y(d.length));
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
d3-hist
力导向图
力导向(force-directed)图布局效果通过d3.forceSimulation(nodes).force()实现，将输入的节点表和关系表转换为带坐标点方便SVG里绘制circle和line的数据。
var data={"nodes":[{"id":"a","group":1},{"id":"b","group":1},{"id":"c","group":2},
{"id":"d","group":1},{"id":"e","group":2}],
"links":[{"source": "a", "target": "b", "value": 5},
{"source": "a", "target": "c", "value": 4},
{"source": "b", "target": "d", "value": 1},
{"source": "c", "target": "e", "value": 2},
{"source": "a", "target": "e", "value": 5}]};
var links = data.links.map(d => Object.create(d));
var nodes = data.nodes.map(d => Object.create(d));
var simulation = d3.forceSimulation(nodes)
.force("link", d3.forceLink(links).id(d => d.id))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(400 / 2,400/ 2));
var svg = d3.select("body").append("svg")
.attr("width",'600').attr("height",'500');
const link = svg.append("g")
.attr("stroke", "#ba5c25").attr("stroke-opacity", 0.6)
.selectAll("line").data(links).join("line")
.attr("stroke-width", d => Math.sqrt(d.value));
const node = svg.append("g")
.attr("stroke", "#fff")
.attr("stroke-width", 1.5)
.selectAll("circle").data(nodes)
.append("circle").attr("r", 5).attr("fill", "#CAE9E0");
node.append("title").text(d => d.id);
simulation.on("tick", () => {
link
.attr("x1", d => d.source.x)
.attr("y1", d => d.source.y)
.attr("x2", d => d.target.x)
.attr("y2", d => d.target.y);
node
.attr("cx", d => d.x)
.attr("cy", d => d.y);
});
弦图
弦图(Chord Diagram)用于表示一组元素之间的联系。输入的数据仍然是节点表nodes和节点间关系表links，弦图将数据节点环状分布，内部通过弦连接，弦的宽度反应连接的强度(values)。数据需要转换为一个NxN的矩阵，矩阵中的a、b、c等在弦图的外圆上用相互分隔的几段弧来表示，对应节点。节点的长度为该元素所在行的总和。
在d3中通过d3.chordDirected()(matrix)得到需要的数据，具体代码如下，因为还需要绘制节点的排布效果，因此会调用d3.arc()。
var data={"nodes":[{"id":"a","group":1},{"id":"b","group":1},{"id":"c","group":2},
{"id":"d","group":1},{"id":"e","group":2}],
"links":[{"source": "a", "target": "b", "value": 5},{"source": "a", "target": "c", "value": 4},
{"source": "b", "target": "d", "value": 1},{"source": "c", "target": "e", "value": 2},
{"source": "c", "target": "a", "value": 6},{"source": "b", "target": "c", "value": 3},
{"source": "e", "target": "b", "value": 2},{"source": "a", "target": "e", "value": 5}]};
var links = data.links;
var nodes = data.nodes;
var names= Array.from(new Set(links.flatMap(d => [d.source, d.target])));
var index = new Map(names.map((name, i) => [name, i]));
var matrix = Array.from(index, () => new Array(names.length).fill(0));
for (var {source, target, value} of links) matrix[index.get(source)][index.get(target)]+= value;
var innerRadius = 200,outerRadius = 206;
var width = 440,height = 440;
var ribbon = d3.ribbonArrow().radius(innerRadius - 0.5).padAngle(1 / innerRadius);
var color = d3.scaleOrdinal(names, d3.schemeCategory10)
var chord = d3.chordDirected().padAngle(12 / innerRadius)
.sortSubgroups(d3.descending).sortChords(d3.descending);
var chords = chord(matrix);
var svg = d3.select("body").append("svg").attr("viewBox", [-600 / 2, -600 / 2, 600, 600]);
var formatValue = x => `${x.toFixed(0)}B`;
var arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius);
svg.append("path")
.attr("fill", "none")
.attr("d", d3.arc()({outerRadius, startAngle: 0, endAngle: 2 * Math.PI}));
svg.append("g")
.attr("fill-opacity", 0.75)
.selectAll("g")
.data(chords)
.join("path")
.attr("d", ribbon)
.attr("fill", d => color(names[d.target.index]))
.style("mix-blend-mode", "multiply");
svg.append("g")
.selectAll("g")
.data(chords.groups)
.join("g")
.call(g => g.append("path")
.attr("d", arc)
.attr("fill", d => color(names[d.index]))
.attr("stroke", "#fff"))
.call(g => g.append("text")
.attr("dy", -3)
.append("textPath")
.attr("startOffset", d => d.startAngle * outerRadius)
.text(d => names[d.index]));
d3-chord
分层树图
要绘制思维导图等分层的树图，在d3中使用的是d3.hierarchy(data)转换为层级数据，再通过d3.tree()(data)建立树的节点，用svg里的<circle>绘制节点，用<path>绘制边，从而有流线的效果。一个绘制示例如下：
var data={"name":"a","children":[{"name":"b","children":[{"name":"c","value":710}]},
{"name":"d","value":250},
{"name":"e","value":863}]};
var width = 500;
var root = d3.hierarchy(data);
root.dx = 30;
root.dy = width / (root.height*5 + 1);
root= d3.tree().nodeSize([root.dx, root.dy])(root);
var svg = d3.select("body").append("svg")
.attr("viewBox", [-20, -100,350,300]);;
var link = svg.append("g").attr("fill", "none")
.attr("stroke", "#555").attr("stroke-opacity", 0.4)
.attr("stroke-width", 1.5).selectAll("path")
.data(root.links()).join("path")
.attr("d", d3.linkHorizontal().x(d => d.y).y(d => d.x));
var node = svg.append("g").attr("stroke-linejoin", "round")
.attr("stroke-width", 3).selectAll("g")
.data(root.descendants()).join("g")
.attr("transform", d => `translate(${d.y},${d.x})`);
node.append("circle").attr("fill", d => d.children ? "#555" : "#999")
.attr("r", 2.5).attr("fill","#1EAFAE");
node.append("text") //文本标签
.attr("dy", "0.31em").attr("x", d => d.children ? -6 : 6)
.attr("text-anchor", d => d.children ? "end" : "start")
.text(d => d.data.name).clone(true).attr("stroke", "white");
d3-tree
总结
布局实现的是数据的变换，从序列数据或二维数据变换为方便绘制一些主题图的数据，例如变成饼图的每个楔形、变成直方图的分箱统计、力导向图的坐标点和连接线等。在d3的v3.x版本里，饼图、直方图等数据转换函数汇总在layout下。通过d3.layout.pie()使用，而v5.x之后的版本没有了layout的集合，而是使用d3.pie()(data)。
本篇笔记学习和实践了饼图、堆叠柱图、直方图、力导向图、弦图及层级树图的绘制。还可以深入学习的有树状图(d3.treemap())、径向堆叠柱状图、汇聚气泡图(d3.pack())、桑吉图(d3.sankey())等等。