D3.js实现绘制和弦图的教程详解

弦图，是一种表示实体之间相互关系的图形方法。直观的看，弦图由节点分段和弧形的边构成。节点分段沿圆周排列，节点之间的关系通过使用弧线或贝塞尔曲线相互连接。值得注意的是，这些弧线是有宽度的，且起止宽度可以不一样。这本质上是因为，弧线的宽度反映了一种矩阵关系（例如A[1,2]=3，A[2,1]=4），因此取值是双向的。——图之典

d3.chord

const population = [
    [1000, 3045, 4567, 1234, 3714],
    [3214, 2000, 2060, 124, 3234],
    [8761, 6545, 3000, 8045, 647],
    [3211, 1067, 3214, 4000, 1006],
    [2146, 1034, 6745, 4764, 5000]
];

const chords = d3.chord()(population);
console.log(chords);

chord ( matrix )的返回值是一个chords数组，其中每个 chord 代表两个节点i和j之间的组合双向流（其中i可能等于j）并且是具有以下属性的对象：

• source- 该弦的源子分组对象
• target- 该弦的目标子分组对象

每个源和目标子组也是具有以下属性的对象：

• startAngle- 以弧度为单位的起始角度
• endAngle- 以弧度表示的结束角度
• value- 流量值矩阵[ i ] [ j ]
• index- 节点索引i

d3.chord还有一些属性：

• padAngle - 设置或获取相邻分组之间的间隔，默认为 0
• sortChords - 设置或获取弦的排序规则
• sortGroups - 设置或获取分组的排序规则
• sortSubGroups - 设置获取子分组的排序规则

和弦图由两部分组成:分组的环形图+表示流量的弦图，d3.chord返回的数据就是弦数据,通常传递给d3.ribbon来显示相互之间的流量关系，弦图数组也包含了另一个表示分组的属性chords.groups,表示计算后的分组数组,分组包含以下属性:

• startAngle - 起始角度
• endAngle - 终止角度
• value - 从节点 i 出去的总量
• index - 节点索引 i

分组数据传递给d3.arc来绘制。

弦数据和分组数据就组成了一个完整的和弦图。

d3.ribbon

const ribbon = d3.ribbon();
ribbon({
  source: {startAngle: 0.7524114, endAngle: 1.1212972, radius: 240},
  target: {startAngle: 1.8617078, endAngle: 1.9842927, radius: 240}
}); 
// "M164.0162810494058,-175.21032946354026A240,240,0,0,1,216.1595644740915,-104.28347273835429Q0,0,229.9158815306728,68.8381247563705A240,240,0,0,1,219.77316791012538,96.43523560788266Q0,0,164.0162810494058,-175.21032946354026Z"

从示例我们可以看到，ribbon通过传入的数据source和target就可以帮我们生成一个path路径，有了路径就可以轻松的绘制弦图了。

const ribbon = d3.ribbon()
.radius(100); // 指定半径大小

chordG.selectAll("path")
    .data(chords)
    .enter()
    .append("path")
    .attr("fill", function (d, i) {
    return color(i);
    })
    .attr("d", ribbon);

绘制分组环形图

通过chrods.groups数据，加上d3.arc就可以轻易的绘制出环形图了，这里和D3(v7)入门七：饼图、环图、玫瑰图，不清楚的可以回顾一下。

//创建绘制器
const arc = d3.arc().innerRadius(100).outerRadius(130);
//绘制
groupG.selectAll("path")
    .data(chords.groups)
    .enter()
    .append("path")
    .attr("fill", function (d, i) {
    return color(i);
    })
    .attr("d", arc);

总结

完成的示例，可以点击查看Demo!

写到这章，我们可以更清晰的理解一下D3这个库所做的事——窥一斑而知全豹。

对于折线图、柱状图这类简单图形，他提供比例尺、坐标轴、以及d3.line,d3.area帮我们生成复杂的path路径。

对于饼图、环图、弦图他提供了成对的方法: d3.pie和d3.arc,d3.chord和d3.ribbon。

核心就是处理数据和通过数据生成path 路径，给用户最简单的方式来绘制图表，可以联想到后面会介绍到的力向导图、地图、树图都是这般操作。D3帮我们解决了最大的问题：处理数据生成关联性，通过数据再生成path路径，就像一个工程车间，我们只需要给原料(数据),最后就能得到成品(图形数据),最后怎么包装(绘制)就由用户自己控制。

到此这篇关于D3.js实现绘制和弦图的教程详解的文章就介绍到这了,更多相关D3.js绘制和弦图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论