可视化工具--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); });