有沒有可以用來繪製點線圖的任何HTML5/Javascript庫？

-1

enter image description here 這是我想動態繪製在網頁上的演示圖像，有沒有javascript或html5庫可以幫助我做這個？有沒有可以用來繪製點線圖的任何HTML5/Javascript庫？

來源

2013-07-02 Di Wu

HTML5爲此提供了畫布元素。它現在對於當前的瀏覽器非常便攜。這裏有一個教程：http://www.w3schools.com/html/html5_canvas.asp

來源

2013-07-02 06:15:11 bitfiddler

你應該看看D3。它是產生花哨的圖表和圖形非常流行的JavaScript庫：一些谷歌上搜索後 https://github.com/mbostock/d3/wiki/Gallery

來源

2013-07-02 06:16:59

，我發現這個教程

http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/

來源

2013-07-02 06:18:47 baliman

雖然有「畫布」上，我會建議SVG (Scalable Vector Graphics) - 它支持所有原語來產生所述顯示。 SVG和Canvas之間的一個最大的區別是一切在畫布立即光柵化（即，吸引到像素的大面積），而一個SVG區受到損害根據需要被渲染的矢量對象。

有喜歡RaphaelJS其「中間」的某些舊的瀏覽器，只有瞭解VRML庫。 RaphaelJS還使SVG VML的工作更輕鬆一些。

Raphaël['ræfeɪəl]使用SVG W3C Recommendation和VML作爲創建圖形的基礎。這意味着您創建的每個圖形對象也是一個DOM對象，因此您可以附加JavaScript事件處理程序或稍後修改它們。 Raphaël的目標是提供一個適配器，使得繪圖矢量藝術兼容跨瀏覽器和簡單。

graffle示例顯示了類似的佈局（形狀與「線條」相關） - 並且甚至是交互式的。

來源

2013-07-02 06:20:33 user2246674

我發現infoVis或thejit庫最適合這樣的圖表。它是一個JavaScript庫，您可以使用它來渲染此類圖形。你所需要做的就是給它提供你的數據，它會爲你佈置這樣的強制定向圖。我已經使用了它很長一段時間了，我發現它的API有很好的記錄，有用和靈活。

退房這兩個例子。

http://philogb.github.io/jit/static/v20/Jit/Examples/ForceDirected/example1.html

http://philogb.github.io/jit/static/v20/Jit/Examples/ForceDirected/example2.html

d3.js和infoVis似乎是最廣泛使用的庫。

我有類似的要求，我測試了大約四個庫包括D3和infoVis/JIT。

我在d3和infoVis中都使用了強制佈局。他們兩個都非常接近，但我最終選擇了infoVis/JIT，因爲我在D3中遇到了一些問題，其中的解決方案並不容易。

1：當您在d3中有多個節點的圖形時，該圖形會在相當長的時間內保持移動/動畫。我發現這是因爲d3圖動畫每刻度。我在這裏和論壇上發現了一些解決方案，但解決這個問題並不容易，而且他們不適合我。2：一旦圖形被渲染，如果你嘗試並拖動一個節點，整個圖形就會移動並動畫本身。儘管我的要求是能夠獨立地拖放和定位各個節點，但保持原樣，以便用戶可以根據需要重新排列節點。我在d3中找不到任何簡單的解決方案。

這兩個問題都在infoVis/JIT中解決了。

查看這些鏈接以瞭解如果您使用d3.js時可能遇到什麼樣的問題。

How do I control the bounce entry of a Force Directed Graph in D3?

D3: Show network reaching layout, then stop force

來源

2013-07-02 06:46:54

有沒有可以用來繪製點線圖的任何HTML5/Javascript庫？

回答

相關問題