Бинарное дерево d3.js с HTML в качестве узлов

Question

Я играл с d3.js, и это круто.Мне нужно иметь двоичное дерево, достаточно гибкое для создания новых дочерних узлов.

Я думал о наличии элемента <svg> (для строк) позади <div>, который будет содержать весь HTML.Мне удалось заставить двоичное дерево выглядеть правильно, и даже когда вы нажимаете на узел, он создает другой узел, но ТОЛЬКО из события, связанного с кругом под элементом <svg>.Как бы получить что-то вроде <div>, чтобы вызвать событие, которое добавляет дочерний узел под родительским?

Кроме того, как изменение размера окна будет работать с этим, так как html отделен от холста svg?

Answer 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 довольно простые и не поддерживают пользовательские события)

Обработка изменения размера окна может быть сложной, так как вы должны установить размеры контейнера canvas и html перед генерацией дерева.

Быстрый и грязный способ обработки этого - установить очень большие размеры дляhtml container

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-элемента (что потребовало бы большого «обхода» данных для обработки).