D3 将 HTML 附加到节点答案

【问题标题】：D3 Appending HTML to NodesD3 将 HTML 附加到节点
【发布时间】：2014-09-09 17:51:52
【问题描述】：

我一直在寻找这个问题的答案，但在我的情况下，类似的问题都没有帮助我。我有一个在运行时创建新节点的 D3 树。当我将鼠标悬停在特定节点上时，我想将 HTML（以便我可以格式化）添加到该节点。现在我可以添加 HTML，但它没有格式化。请帮忙！

JS代码：

 var width = 960,
            height = 500;

    var tree = d3.layout.tree()
            .size([width - 20, height - 60]);

    var root = {},
            nodes = tree(root);

    root.parent = root;
    root.px = root.x;
    root.py = root.y;

    var diagonal = d3.svg.diagonal();

    var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(-30,40)");

    var node = svg.selectAll(".node"),
            link = svg.selectAll(".link");

    var duration = 750;

    $("#submit_button").click(function() {
        update();
    });
    function update() {
        if (nodes.length >= 500) return clearInterval(timer);

        // Add a new node to a random parent.
        var n = {id: nodes.length},
                p = nodes[Math.random() * nodes.length | 0];
        if (p.children) p.children.push(n); else p.children = [n];
        nodes.push(n);

        // Recompute the layout and data join.
        node = node.data(tree.nodes(root), function (d) {
            return d.id;
        });
        link = link.data(tree.links(nodes), function (d) {
            return d.source.id + "-" + d.target.id;
        });

        // Add entering nodes in the parent’s old position.
        var gelement = node.enter().append("g");

        gelement.append("circle")
                .attr("class", "node")
                .attr("r", 20)
                .attr("cx", function (d) {
                    return d.parent.px;
                })
                .attr("cy", function (d) {
                    return d.parent.py;
                });

        // Add entering links in the parent’s old position.
        link.enter().insert("path", ".g.node")
                .attr("class", "link")
                .attr("d", function (d) {
                    var o = {x: d.source.px, y: d.source.py};
                    return diagonal({source: o, target: o});
                })
                .attr('pointer-events', 'none');

        node.on("mouseover", function (d) {
            var g = d3.select(this);
            g.append("text").html('First Line <br> Second Line')
            .classed('info', true)
            .attr("x", function (d) {
                return (d.x+20);
            })
            .attr("y", function (d) {
                return (d.y);
            })
            .attr('pointer-events', 'none');


        });

        node.on("mouseout", function (d) {
            d3.select(this).select('text.info').remove();
        });


        // Transition nodes and links to their new positions.
        var t = svg.transition()
                .duration(duration);

        t.selectAll(".link")
                .attr("d", diagonal);

        t.selectAll(".node")
                .attr("cx", function (d) {
                    return d.px = d.x;
                })
                .attr("cy", function (d) {
                    return d.py = d.y;
                });
    }

【问题讨论】：

目前您似乎没有添加任何 HTML。
我已经意识到了。将 .text 更改为 .html 会使文本根本不显示。
您需要使用foreignObject，参见例如bl.ocks.org/mbostock/1424037
好的，这让 HTML 显示出来了，谢谢，但是我如何更改它的位置并在鼠标移出时将其删除？ .attr("x", function (d) { //return (d.parent.px); return (dx); }) 不会改变它的 x 坐标和 d3.select(this).select('foreignObject' ）。消除（）;不会删除它
参见例如d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html

标签： javascript d3.js

【解决方案1】：

使用 Lars Kotthoff 的出色指导，我得到了它的工作，所以我决定将它发布给其他人和我自己的参考：

http://jsfiddle.net/FV4rL/2/

附加以下代码：

node.on("mouseover", function (d) {
            var g = d3.select(this); // The node
            var div = d3.select("body").append("div")
                    .attr('pointer-events', 'none')
                    .attr("class", "tooltip")
                    .style("opacity", 1)
                    .html("FIRST LINE <br> SECOND LINE")
                    .style("left", (d.x + 50 + "px"))
                    .style("top", (d.y +"px"));
});

【讨论】：