我注意到了D3的集羣佈局的一個奇妙的例子this。而不是有一個邊界框;是否有可能強制將它們聚成一個多邊形？ http://codepen.io/zslabs/pen/MKaRNJ是多邊形形狀的一個例子，但我正在尋找碰撞檢測的附加好處以及映射數據的高性能方式。非常感謝！D3：多邊形內的聚集力佈局

更新

https://github.com/d3/d3-shape看起來像有關創建這些形狀有趣的圖書館，我還沒有看到繪製和規定的多邊形內傳播的一個例子。

來源

2016-01-08 Zach

碰撞檢測相當複雜，在數據可視化中不常用，所以D3沒有內置的功能。也許你應該考慮使用[Box2D]（http://box2d.org/）的 - 有[通過emscripten的JavaScript端口]（https://github.com/kripken/box2d.js/）。 – Anko

對於像菱形或其他東西中約束節點的相當簡單的情況，我相信你可以自己弄清楚矢量。如果你想要任意的凹十二面體或者其他東西，那會有些痛苦。你想要這個功能多少錢？：D – Anko

嘿@Anko謝謝你的回覆。我想我可能有點碰撞檢測術語的字面意思;或多或少只是將它們繪製在D3示例所示的形狀中。我提到的是一個很好的基礎;但是我發現有困難的部分是將這些點隨機地包圍在一個多邊形而不是簡單的矩形中，並且還要進行傳播 - 不對這些點進行聚類。這仍然從根本上不符合D3的能力？ – Zach

我也一直在尋找同樣的事情，我發現這個類似的線程：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的功能，但它可能是太特定：/

更新：

只是一個小的修正：在proprosed解決方案採用說明與我所說的相反的多邊形質心。我的錯。

更新2：

我已經創建與多邊形碰撞檢測的方式的模塊：http://bl.ocks.org/pbellon/4b875d2ab7019c0029b636523b34e074。

它使用在SO的答案中提到的碰撞檢測我鏈接了&我用它在d3.v4上創建了一個像「forceCollide」這樣的「force」。

這不是完美的，但我有很多麻煩來調整節點可以從多邊形的邊界排斥...如果有人有建議，我會很高興聽到他們！

來源

2016-10-05 14:39:21 PierreB

D3：多邊形內的聚集力佈局

更新

回答

相關問題