D3 树节点点击

Question

我目前有一个 D3 树布局，其中的节点可以在运行时添加，并在每个节点上附加文本。除了 node.on(..) 之类的 node.on("mousedown" ....) 函数外，几乎所有东西都可以正常工作。问题是节点本身不响应点击，附加的文本会。 IE。 node.on("mousedown",...) 在单击附加文本时触发，而不是实际节点。任何指导将不胜感激！核心函数的代码如下，它简单地接受一个 JSON 样式的对象和一个父 ID，然后将该 JSON 数据作为给定父级的子级插入到树中：

function update(record_to_add, parent) {
    if (nodes.length >= 500) return clearInterval(timer);

    // Add a new node to a random parent.
    var n = {id: nodes.length, Username: record_to_add.Username},
            p = nodes[parent];
    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.
    node.enter().append("circle", "g")
            .attr("class", "node")
            .attr("r", 10)
            .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", ".node")
            .attr("class", "link")
            .attr("d", function(d) {
                var o = {x: d.source.px, y: d.source.py};
                return diagonal({source: o, target: o});
            });
    node.enter().insert("text")
            .attr("x", function(d) { return (d.parent.px);})
            .attr("y", function(d) { return (d.parent.py);})
            .text(function(d) { return d.Username; });

    node.on("mousedown", function (d) {
        var g = d3.select(this); // The node
        // The class is used to remove the additional text later
        console.log("FOO");
    });

    node.on("mouseover", function (d) {
        var g = d3.select(this); // The node
        // The class is used to remove the additional text later
        var info = g.append('text')
                .classed('info', true)
                .attr('x', 20)
                .attr('y', 10)
                .text('More info');
    });

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

    t.selectAll("text")
            .style("fill-opacity", 1)
            .attr("x", function(d) { return d.px = d.x; })
            .attr("y", function(d) { return d.py = d.y; });
}

Answer 1

为避免文本元素妨碍事件捕获，您可以尝试将文本元素配置为忽略指针事件：

svg text {
    pointer-events: none;
}

你也可以直接用 d3 来做：

textSelection
    .attr('pointer-events', 'none');