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

【问题标题】：d3.js binary tree with HTML as the nodes以 HTML 为节点的 d3.js 二叉树
【发布时间】：2012-01-02 05:01:11
【问题描述】：

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

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

由于 html 与 svg 画布分开，如何调整窗口大小？

【问题讨论】：

这是一个有趣的问题，但我们需要先查看代码才能做出回应。理想情况下，您可以使用当前代码设置 jsFiddle。否则，试图回答的人将不得不重新创建您的代码！

标签： javascript html dom d3.js

【解决方案1】：

您可以将事件处理程序附加到 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 的事件处理程序非常基础，不支持自定义事件）

处理窗口大小调整可能很棘手，因为您必须在生成树之前设置画布和 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 元素大小计算树的深度和宽度（这将涉及大量“遍历”数据才能计算出来）。

【讨论】：

将此标记为答案，因为我很久以前就放弃了 d3.js，但无论如何这是最有意义的谢谢！
你用什么代替了 d3？分享您更改的内容和原因会很有用。