D3.js Chords API 完整参考

D3.js是一个基于数据的JavaScript库，它允许您通过数据来操作文档。其中D3.js Chords API是D3.js库中的一个子库，用于绘制弦图。本篇文章将提供D3.js Chords API的完整参考，帮助程序员更好地使用该库。

Chord

d3.chord() 函数返回了一个用于布局弦图的对象。可以使用 chord(matrix) 方法来生成一个由给定矩阵描述的弦图布局。

定义

d3.chord()

示例

const matrix = [
    [11975,  5871, 8916, 2868],
    [ 1951, 10048, 2060, 6171],
    [ 8010, 16145, 8090, 8045],
    [ 1013,   990,  940, 6907]
];

const chordLayout = d3.chord()
    .padAngle(0.05)
    .sortSubgroups(d3.descending)(matrix);

Ribbon

d3.ribbon() 函数返回了一个对象，用于绘制弦图内部的带状形。

定义

d3.ribbon()

示例

const innerRadius = 180;
const outerRadius = 200;

const ribbonPath = d3.ribbon()
    .radius(innerRadius)
    .startAngle(Math.PI/2)
    .endAngle(Math.PI*3/2)
    .source({
        startAngle: Math.PI*5/4,
        endAngle: Math.PI*7/4,
        radius: outerRadius
    })
    .target({
        startAngle: Math.PI/4,
        endAngle: Math.PI*3/4,
        radius: outerRadius
    });

const ribbon = svg.append("path")
    .attr("d", ribbonPath)
    .attr("fill", "red");

Group

d3.group() 函数返回了一个对象，用于绘制弦图的群组。

定义

d3.group()

示例

const innerRadius = 180;
const outerRadius = 200;

const groupPath = d3.group()
    .startAngle(Math.PI/2)
    .endAngle(Math.PI*3/2)
    .innerRadius(innerRadius)
    .outerRadius(outerRadius);

const group = svg.append("path")
    .attr("d", groupPath)
    .attr("fill", "blue");

链接

在此阅读完整的D3.js Chords API文档。