d3和batik：客戶端行爲的服務器端svg生成的優缺點

Question

我公司目前有一個內部工程師開發的SVG圖形庫（遵循Wilkinson的圖形語法規定），他們渴望在基於瀏覽器的數據探索工具中重複使用。唯一的事情是這個庫提供靜態SVG圖像，而不支持任何交互。

我正在尋找用Apache Batik替換一些自制代碼，並用javascript庫增強圖形以通過d3提供交互性。

例如，散點圖會在服務器端生成已知的css類，幷包含在用戶可以訪問的html頁面中，而該頁面又會利用d3.js和我們的javascript庫。在加載時，我們將選擇圖形並添加適當的鼠標懸停/點擊/縮放等。處理程序。

這似乎是理論上的工作，但我想知道我們是否忽略了某些東西。這是一種有效/可靠的做事方式，還是我們應該專注於創建交互式圖形而不是兩個圖形庫？

我認爲可能會出現問題的領域是流數據。在我看來，我們可以從一個靜態圖形開始，但是一旦你開始動態地創建點/線/等，你真的需要知道圖形所遵循的規則（例如，哪些變量實際映射到一條圖線，其顏色等等），這使得服務器和客戶端都需要冗餘定義。

所以......你怎麼看？

Answer 1

D3中沒有什麼假設或要求您以空白頁面/ SVG開頭。從現有元素開始並修改它們是完全有效的。實質上，唯一的區別在於，在大多數創建元素的示例中，您將省略初始步驟。

唯一需要擔心的是正確的數據被綁定到正確的元素，這取決於數據對DOM元素的分配有多複雜，可能會也可能不會造成問題。原則上，你的代碼會喜歡這個。

var selection = d3.select("#existingSVG").selectAll("text").data(dataForText); 

這給你你的標準D3選擇與進入，更新和退出部分可以像你通常會做的那樣操作。如果您的數據綁定很複雜，您可能需要指定一個.data()的關鍵功能。流數據的過程相同。