d3.js以HTML作为节点的二叉树

Question

我一直在玩d3.js，这很酷。我需要一个足够灵活的二叉树来创建新的子节点。

我在考虑在<svg>后面有一个<div>元素（用于行），其中包含所有HTML。我设法让二进制树看起来正确，即使你点击一个节点，它也会创建另一个节点，但仅限于绑定到<svg>元素下的圆圈的事件。我如何获得类似<div>的东西来触发在父级下添加子节点的事件？

另外，由于html与svg canvas分开，窗口大小调整如何使用？

Answer 1

您可以像使用svg元素一样将事件处理程序附加到html

// 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包装它

<div id="chart" style="width:100%; overflow:hidden">
     <div id="chart-inner">

这不是一个理想的解决方案。如果你想要正确地完成它，你将必须根据最初的html元素大小计算树的深度和宽度（这将涉及大量“行走”数据来计算出来）。