呈現HTML5中互連元素的網頁的最佳方式？

我正在尋找在HTML5中呈現互連元素網頁的最佳方式。呈現HTML5中互連元素的網頁的最佳方式？

例如，假設我有以下文件：

firstObject = { other1: secondObject; other2: thirdObject } 
secondObject = {other1: thirdObject} 
thirdObject = {other1: firstObject}

我想渲染這些，例如，圓形，與誰相互引用的文檔之間的連接線。

我不確定實現像這樣的最佳方式是什麼：我使用畫布嗎？如果是這樣的話，我將如何正確地佈置畫布給予上述數據（如何定位元素，以便它們可以在它們之間連接線之間繪製線）？

我不是在尋找代碼，只是建議在哪裏以及如何開始。

來源

2013-12-08 Christian Stewart

現在我會和帆布一起去，但我沒有親身體驗它。剛剛看到它可以做什麼。 – Deryck

錯綜複雜，但很好的問題。我會沿着計算元素和距離的角度去做一些事情，創建一個1px寬的「div」，元素之間有正確的角度，也適用於距離。 – Markasoftware

需要更多信息:)你能描述一下你的數據模式和他們的關係嗎？ – markE

我實際上最終使用D3.js來完成這項工作。

這裏是結果： EVE Online System Map

您可以通過在製作JSON文件與節點（任何數據都可以在其中，在這種情況下，只是標題）和連接（鏈接，索引之間實現這樣的事情節點陣列）。然後D3加載這個JSON文件，並用一些代碼可以將其渲染在Force Directed Layout。你可以看到，這些是來自熱門遊戲EVE Online的系統 - 我把他們的數據庫轉儲，並編寫了一個C＃程序來從他們的數據庫中的系統數據生成這種類型的json數據。

來源

2013-12-08 17:18:34

對於幾何不需要很多交互的東西，從設計的角度來看應該不代表很多文字信息，canvas是最明確的選擇。我們現在已經過了canvas還在測試階段 - 現在它已被所有主流瀏覽器支持。

我會先考慮數據中的變量。多少自由度？我將如何改變每個變量的表示形式？例如，如果您希望顯示每個文檔的（數字）屬性，例如文檔的大小，則可以改變表示文檔的形狀的大小。

您可能還想考慮如何定位元素。每個點的x和y座標代表什麼？如果您沒有任何可能由座標表示的有意義的東西，您希望如何隨機排列這些點 - 換句話說，您希望圖片看起來像什麼？

一旦你得到了這些設計問題想通了，剩下的就是學習代碼canvas的問題：看看由Mozilla的MDN和日益流行Dive Into HTML5提供的教程。

來源

2013-12-08 04:07:57

我可能實際上也使用SVG - 感謝鏈接和洞察力。 –

呈現HTML5中互連元素的網頁的最佳方式？

回答

相關問題