可视化工具--D3--案例分析--Chord Diagram

可视化工具–D3–案例分析

Chord Diagram

弦图是为了表示一组具有相互关系的单位之间的联系，通常连线表示具有联系，连线的粗细表示权重。D3中有布局可以自动转换数据。这里以D3官方网站example做实际分析。

实例链接 http://bl.ocks.org/mbostock/4062006

部分接口：
outerRadius:设置半径（背线）
innerRadius:设置半径（基线）
formatPrefix:指定值和精度,用来自动判断数据量级
padAngle:设置圆弧之间间隔角度
sortSubgroups:设置矩阵二级分组的排序函数
scaleOrdinal:设置序数变换的颜色

弦图布局把数据分为groups和chords，其中groups为外弦，包括节点和刻度；chords为内弦，包括节点之间连线以及其权重。

添加画布与设置：

var svg = d3.select("svg"),width = +svg.attr("width"),height = +svg.attr("height"),outerRadius = Math.min(width, height) * 0.5 - 40,innerRadius = outerRadius - 30；

生成器创建：

var chord = d3.chord().padAngle(0.05).sortSubgroups(d3.descending);

var arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius);

颜色与精度设置：

var formatValue = d3.formatPrefix(",.0", 1e3);

var color = d3.scaleOrdinal().domain(d3.range(4)).range(["#000000", "#FFDD89", "#957244", "#F26223"]);

绘制外部弦：

var g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")").datum(chord(matrix));

var group = g.append("g").attr("class", "groups").selectAll("g").data(function(chords) { return chords.groups; }).enter().append("g");

group.append("path").style("fill", function(d) { return color(d.index); }).style("stroke", function(d) { return d3.rgb(color(d.index)).darker(); }).attr("d", arc);

绘制内部弦：

g.append("g").attr("class", "ribbons").selectAll("path").data(function(chords) { return chords; }).enter().append("path").attr("d", ribbon).style("fill", function(d) { return color(d.target.index); }).style("stroke", function(d) { return d3.rgb(color(d.target.index)).darker(); });

刻度绘制：、

函数

function groupTicks(d, step) {var k = (d.endAngle - d.startAngle) / d.value;return d3.range(0, d.value, step).map(function(value) {return {value: value, angle: value * k + d.startAngle};});
}

绘制

 var groupTick = group.selectAll(".group-tick").data(function(d) { return groupTicks(d, 1e3); }).enter().append("g").attr("class", "group-tick").attr("transform", function(d) { return "rotate(" + (d.angle * 180 / Math.PI - 90) + ") translate(" + outerRadius + ",0)"; });

groupTick.append("line").attr("x2", 6);

groupTick.filter(function(d) { return d.value % 5e3 === 0; }).append("text").attr("x", 8).attr("dy", ".35em").attr("transform", function(d) { return d.angle > Math.PI ? "rotate(180) translate(-16)" : null; }).style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; }).text(function(d) { return formatValue(d.value); });

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！