javascript - 强制链接在节点下绘制

Question

我有一个 D3 树形图

http://jsfiddle.net/bGR8N/9/

在运行时创建节点(因此它与其他示例有点不同)。我有显示在 node.on("mouseover...") 上的文本。问题在于节点有时与链接重叠。现在，我知道我应该能够通过先创建链接然后再创建节点来解决此问题，但随后我得到:

Error: Invalid value for <path> attribute d="M,C,NaN ,NaN ,"

Javascript代码:

var width = 960,
        height = 500;

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

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(10,10)");

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.

        // 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});
                });

                    var gelement = node.enter().append("g");

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

        node.on("mouseover", function (d) {
            var g = d3.select(this); // The node
            // The class is used to remove the additional text later
            //debugger;
            var info = g.insert('text')
                    .attr("x", function (d) {
                        //return (d.parent.px);
                        return (d.x + 10);
                    })
                    .attr("y", function (d) {
                        //return (d.parent.py);
                        return (d.y + 10);
                    })
                    .text(function (d) {
                        return "Info on FOO";
                    });

            console.log("FOO");

        });

        node.on("mouseout", function (d) {
            d3.select(this).select('text').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;
                });
    }

Answer 1

找出了问题所在，但不确定具体原因，但正在改变

link.enter().insert("path", ".g.node")

到

link.enter().insert("path", "g")

问题已解决