在d3中为弦图设置最小范围

Question

我正在使用d3创建弦图，并且有几个和弦组的值为0。由于这个原因，和弦组被呈现为几乎为0的弧宽度的薄片，这使得添加任何交互都很困难（鼠标目标几乎不可能）。我想知道是否有任何方法可以应用输出范围，以便让我拥有组成和弦组的和弦具有非零最小输出值。

- Teachrdan

---

和弦布局没有暴露任何可以做这个的东西。你需要修改源代码。 - undefined

我也在寻找这样的定制化解决方案，你找到了任何解决办法吗？ - undefined

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直到你满意为止。

- Dirk Bester