D3:多边形

时间:2016-01-08 16:31:45

标签: d3.js

我注意到了this D3群集布局的精彩示例。而不是有一个边界框;是否可以强制将它们聚类成多边形? http://codepen.io/zslabs/pen/MKaRNJ是多边形形状的一个示例,但我正在寻找碰撞检测的额外好处以及映射数据的高效方法。非常感谢!

更新

https://github.com/d3/d3-shape看起来像是一个关于创建这些形状的有趣库,我还没有看到在定义的多边形内绘图和传播的例子。

.

1 个答案:

答案 0 :(得分:2)

我也在寻找相同的东西,我找到了类似的线程:Force chart d3.js inside a triangle

most voted answer有一种方法可以检测三角形内的碰撞,并提出一个通用版本,使其适用于多边形。您可以在this demo中看到它。

答案中没有提到并且可能对您有用的一件事是计算不同多边形的中心,以便使不同的力布局在这些多边形内居中,我建议使用polygonCentroid为此。

var polygon = require('d3-polygon');
var polygon_data = [ [0,0], [10, 0], [10, 10], [0, 10]]; // a small box 
var centroid = polygon.polygonCentroid(polygon_data); // [5, 5]

我当然希望将此多边形约束视为d3中的一项功能,但它可能过于具体:/

<强>更新

只是一个小小的修正:预测的解决方案考虑了多边形的质心,与我所说的相反。我的坏。

更新2:

我创建了一个带有多边形碰撞检测实现的块:http://bl.ocks.org/pbellon/4b875d2ab7019c0029b636523b34e074

它使用我在SO&S的答案中提到的碰撞检测。我用它来创造一个力量&#34;像d3.v4上的forceCollide

它并不完美,但我在调整节点可以从多边形边界排斥的方式上遇到了很多麻烦......如果有人有建议我很乐意听到它们!