Setting a minimum range for chord diagram in d3

Question

I'm creating a chord diagram in d3 and have several chord groups with a value of 0. Because of this, the chord groups are rendered as slivers with an arc width of near-0, which makes adding any interaction difficult (it makes a near-impossible mouse target). I'm wondering if there is any way to apply an output range that would allow me to have a non-zero minimum output value for the chords making up the chord group.

Vicentevicepresident

The chord layout doesn't expose anything to do this. You'd have to modify the source. – Prelusive

I'm also searching for such customization have you found any solution?? – Cherellecheremis

Answer 1

Using https://observablehq.com/@d3/directed-chord-diagram/2 as working example code, what you can do is compute a minimum size as follows:

// Compute a dense matrix from the weighted links in data.
const names = Array.from(d3.union(data.flatMap((d) => [d.source, d.target])))
const index = new Map(names.map((name, i) => [name, i]))
const matrix = Array.from(index, () => new Array(names.length).fill(0))
let total = 0
for (const { source, target, value } of data) {
    total += value
}
let min = total / 360 // minimum for display size
for (const { source, target, value } of data) {
    matrix[index.get(source)][index.get(target)] += Math.max(value, min)
}

total gets you how much needs to fit, and dividing by 360 gets you in the neighborhood. Adjust 360 till you are happy.

Epoch