html 二叉树模式,d3.js用HTML作为节点的二叉树

你会你会以同样的方式附加事件处理程序的HTML到SVG元素

// Enter any new nodes at the parent's previous position.

node.enter()

// append an html div

.append("div")

// event handlers

.on("click", function(d) {

// your code to add a new node

})

(我最后一次检查D3的事件处理程序是非常基本的，不支持自定义事件)

处理窗口大小调整可能会非常棘手，因为您必须在生成树之前设置canvas和html容器尺寸。

处理这方面的一个快速和肮脏的方法是对HTML容器设置非常大的尺寸

vis = d3.select("#chart-inner").append("svg:svg").attr("id", "svg-container").attr("width", 40000).attr("height", 20000).append("svg:g").attr("transform", "translate(0,100)");

然后用div容器

它不是一个真正的包裹了这一切理想解决方案如果你想正确地做到这一点，你必须根据最初的HTML元素大小(这将涉及到很多“行走”数据来制定)来计算树的深度和宽度。