在 d3 中设置和弦图的最小范围

Question

我正在 d3 中创建一个和弦图，并且有几个值为 0 的和弦组。因此，和弦组被渲染为弧宽接近 0 的条子，这使得添加任何交互变得困难（这使得几乎不可能的鼠标目标）。我想知道是否有任何方法可以应用一个输出范围，使我能够为构成和弦组的和弦提供非零的最小输出值。

Answer 1

使用 https://observablehq.com/@d3/directed-chord-diagram/2 作为工作示例代码，您可以做的是计算最小大小，如下所示：

// 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)
}

总计可以得到需要适合的数量，除以 360 可以得到邻域。 360度调整，直到你满意为止。