Javascript d3中树节点上的调用运算符

我正在用d3编写一个可折叠树，我想在其中添加和删除节点。从d3网站（）的示例开始，我在每个节点旁边添加了两个用于添加/删除节点的符号，并使用call（）函数调用add_node（）或remove_node（）函数

有关守则如下：

function update(source) {

    // Compute the new tree layout.
    nodes = tree.nodes(root).reverse(),
    links = tree.links(nodes);

    // Normalize for fixed-depth.
    nodes.forEach(function (d) {
        d.y = d.depth * 80;
    });

    // Update the nodes…
    var node = svg.selectAll("g.node")
    .data(nodes, function (d) {
        return d.id || (d.id = ++i);
    });

    // Enter any new nodes at the parent's previous position.
    var nodeEnter = node.enter().append("g")
    .attr("class", "node")
    .attr("transform", function (d) {
        return "translate(" + source.x0 + "," + source.y0 + ")";
    })
    .on("click", click);

    nodeEnter.append("circle")
    .attr("r", 1e-6)
    .style("fill", function (d) {
        return d._children ? "lightsteelblue" : "#fff";
    });

    nodeEnter.append("text")
    .attr("text-anchor", "middle")
    .attr("dy", "4px")
    .attr("font-size", 0)
    .text(function (d) {
        return d.value;
    })
    .style("fill-opacity", 0.1);


    // X sign and circle for clicking on it
    // ...
    node.append("circle")
    .attr("r", radius *0.8)
    .attr("cx", -radius*1.5)
    .attr("cy", "0px")
    .style("fill-opacity", 0)
    .style("opacity", 0)
    .call(remove_node);

    // plus sign and circle for clicking on it
    // ...
    node.append("circle")
    .attr("r", radius)
    .attr("cx", radius * 1.5)
    .attr("cy", "0px")
    .style("fill-opacity", 0)
    .style("opacity", 0)
    .call(add_node);

    // ...
}

function add_node(node) {
    console.log("add node")
}


function remove_node(node) {
   console.log("remove node");
}

问题是，无论我单击节点、添加符号还是删除符号，结果总是节点被展开或折叠（取决于启动状态），并且add_node（）和remove_node（）函数都会被调用，就好像这三个调用都与同一事件挂钩一样，我想要的是，单击节点会使节点展开/折叠，单击添加符号只调用add_node（）函数，单击移除符号只调用remove_node（）函数

这是一把小提琴：

有没有暗示我错在哪里

谢谢，

---

Andrea

您已经添加了节点，它是在和单个g元素下添加符号组件和删除符号组件的文本。将他们分成3个子组

然后将

.call

更改为

.on（'click'…

），这样

将成为

// plus sign group
var gan = node.append("g")
    .on('click', add_node);

gan.append("line")
    .attr("stroke", "#AAA")
    .attr("stroke-width", "2")
    .attr("x1", radius * 1.2)
    .attr("y1", "0px")
    .attr("x2", radius * 1.8)
    .attr("y2", "0px")

gan.append("line")
    .attr("stroke", "#AAA")
    .attr("stroke-width", "2")
    .attr("x1", radius * 1.5)
    .attr("y1", -radius * 0.3)
    .attr("x2", radius * 1.5)
    .attr("y2", radius * 0.3)

类似地，对于其他2组组件（我看到您已经有了用于节点展开/折叠的部分组件）

顺便说一下，如果您需要更多的点击区域，您可以为x和+添加回圆圈

---

更新小提琴-

// plus sign group
var gan = node.append("g")
    .on('click', add_node);

gan.append("line")
    .attr("stroke", "#AAA")
    .attr("stroke-width", "2")
    .attr("x1", radius * 1.2)
    .attr("y1", "0px")
    .attr("x2", radius * 1.8)
    .attr("y2", "0px")

gan.append("line")
    .attr("stroke", "#AAA")
    .attr("stroke-width", "2")
    .attr("x1", radius * 1.5)
    .attr("y1", -radius * 0.3)
    .attr("x2", radius * 1.5)
    .attr("y2", radius * 0.3)