2016-02-26 104 views
2

enter image description here我有一個要求,我必須開發類似於d3.js樹形佈局給出的樹形佈局。但我想要自定義內容的HTML框,而不是僅僅是節點。我花了很多時間試圖找出d3.js是否可能,但我在這個時間點卡住了,無法繼續。d3.js樹形佈局中的自定義html框

的數據將是動態的

它不必是d3.js如果有任何其他可行的解決方案/可用的框架。但預期的功能類似於d3提供的功能,即擴展,摺疊節點。

任何指針將不勝感激。

+0

如果您想要更詳細的回覆,我建議您更加明確地表達自己希望達成的目標。也許製作一張你想要它看起來像什麼的圖表,以及你想要在這些html元素中做什麼。該函數通過映射基於輸入哈希的SVG圓元素來工作。您是否嘗試過重新編寫代碼來添加所需的HTML元素?您希望顯示的數據是固定的還是動態的? – Damon

+0

@Damon - 請看照片。感謝您的迴應。謝謝 – Vatsal

回答

2

想要做什麼可以通過使用ForeignObject來實現。

的基本情況是這樣的一個:

<foreignObject requiredExtensions="http://www.w3.org/1999/xhtml"> 
    <body xmlns="http://www.w3.org/1999/xhtml"> 
    <p>Some text</p> 
    </body> 
</foreignObject> 

下面是一個更完整的例子:http://jsfiddle.net/thudfactor/bK6VD/

您使用d3來生成基於您的數據foreignObject內容。