javascript - 在 d3 中的树节点上调用运算符

Question

我正在用 d3 编写一个可折叠树，我想在其中添加和删除节点。从 d3 网站 ( http://bl.ocks.org/mbostock/4339083 ) 的示例开始，我在每个节点旁边添加了两个用于添加/删除节点的符号，并使用 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() 函数被调用，就好像这三个调用被 Hook 到同一个事件，而我想要的是单击节点会使节点展开/折叠，而单击添加符号仅调用 add_node() 函数，单击删除符号仅调用remove_node() 函数。

这是一个 fiddle :http://jsfiddle.net/andreaiacono/yd5r6u4t/1/

有什么提示我错在哪里吗？

谢谢，安德里亚

Answer 1

您已添加节点，它是单个 g 元素下的添加符号组件和删除符号组件的文本。相反，将它们分为 3 个子组。

然后将您的 .call 更改为 .on('click'...。因此，这个

// plus sign and circle for clicking on it
node.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")

node.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)

node.append("circle")
.attr("r", radius)
.attr("cx", radius * 1.5)
.attr("cy", "0px")
.style("fill-opacity", 0)
.style("opacity", 0)
.call(add_node);

会变成

// 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 和 + 的圆圈。

<小时/>

更新了 fiddle - http://jsfiddle.net/6egecqzt/