d3 svg path添加文本_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的标签。

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()上，设置每个楔形弧段边缘的圆角效果，类似于标签的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里的绘制节点，用绘制边，从而有流线的效果。一个绘制示例如下：

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())等等。