d3包布局 - 如果数据的值为“0”，则气泡重叠

Question

我使用d3.layout.pack（）为以下包含'0'值的json创建了一个打包的气泡图。

{ "children": [{ "className": "a", "value": 0},
{ "className": "b", "value": 1},
{ "className": "c", "value": 0},
{ "className": "d", "value": 0},
{ "className": "f", "value": 0},
{ "className": "g", "value": 8},
{ "className": "h", "value": 2},
{ "className": "i", "value": 6},
{ "className": "j", "value": 8},
{ "className": "k", "value": 4},
{ "className": "l", "value": 3}] };

创建此图表时，某些气泡重叠。

https://jsfiddle.net/remila_antony/chrrp3ww/

如何解决此问题？

Answer 1

这是known issue。根据迈克博斯托克的说法：

  

在计算包布局时，可能[you]应该过滤掉零值（即使是非常小的值）。问题是当比较的两个值非常不同时（一个非常小，比如接近零，另一个非常大），包交叉测试失败。

因此，解决方案是过滤掉零：

flat.children = flat.children.filter(d=>d.value>0);

这是你的小提琴：https://jsfiddle.net/2umsqjt1/