[D3.js chord chart]

d3- chord chart

Chord chart is mainly used to show links between nodes. Consists mainly of two parts, the string section and some nodes represent nodes linked, represent the proportion of the thickness of the string.

scenes to be used:

1. The proportion of the population flow between the cities.
2. A group of people e-mail exchange ratio.
...

Videos a sinogram, requires a first data matrix matrix, the number of bits represented by two groups, each of which is an array of nodes, and matrix[i][j]indicates the flow to the i-th node of the j-th node.

const matrix = [
    [ 10,  20 , 20 , 30 , 40 ], // 节点1
    [ 5,  15 , 55 , 10  , 10 ], // 节点2
    [ 20,  5 , 80 , 5 , 5  ], // ...
    [ 10,  20 , 20 , 30 , 40 ],
]

Then d3.chordprocess the data

const chords = d3.chord()
    (matrix)

The return value is set chords, for flow between a pair of nodes, comprising two properties:

• source: string source node object
• target: string target node object

source和targetObject contains the following attributes:

• startAngle starting angle
• endAngle end angle
• index index i
• subindex index j
• value matrix[i][j]value

Then use d3.ibbonto draw all the strings:

	const colors = d3.schemeSet3
    function drawChords() {
        const ribbon = d3.ribbon()
            .radius(200)
        
        svg.append('g')
            .attr('class', 'chord')
            .selectAll('path')
            .data(chords)
            .enter()
            .append('path')
            .attr('d', ribbon)
            .attr('fill', ({ source: { index } }) => colors[index])
            .attr('stroke', ({ source: { index } }) => d3.rgb(colors[index]).darker())
            .on('mouseover', function ({ source: { index } }, i) {
                d3.select(this)
                    .attr('fill', d3.rgb(colors[index]).darker())
            })
            .on('mouseout', function ({ source: { index } }) {
                d3.select(this)
                    .attr('fill', colors[index])
            })
    }

Then drawing all of the nodes in the node data chords.groups, comprising the following properties:

• In fact, the angle startAngle
• endAngle end angle
• value value
• index index

We use a pie chart generator can be drawn:

function drawGroups() {
    const groups = chords.groups // 节点数组

    const arc = d3.arc()
        .innerRadius(210)
        .outerRadius(230)
    
    svg.append('g')
        .attr('class', 'groups')
        .selectAll('g')
        .data(groups)
        .enter()
        .append('g')
        .attr('class', 'group')
        .append('path')
        .attr('d', d => {
            return arc(d)
        })
        .attr('fill', (_, i) => colors[i])
}

Alternatively you can set a gap, like the collation between nodes between nodes chord, with particular reference to the official api.

Demo: Live Demo
complete source address: https: //github.com/shenyiling/d3-demos/blob/master/chord-chart.html