基于d3.js v3组织图：点击父节点任意区域折叠子节点需求

核心修改步骤 #

• 给整个父节点组绑定点击事件，替代仅按钮触发的逻辑：
  找到代码中创建节点组（<g class="node">）的部分，添加点击事件绑定：

  var node = svg.selectAll(".node")
      .data(nodes)
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
      .on("click", click); // 新增此行，让整个节点区域可触发折叠
  

• 调整原有"+"按钮的事件（避免重复触发）：
  如果保留按钮的点击反馈，修改按钮的点击事件逻辑，阻止事件冒泡到父节点：

  node.append("circle")
      .attr("r", 4.5)
      .attr("class", "expand-button")
      .on("click", function(d) {
        d3.event.stopPropagation(); // 阻止事件冒泡，避免重复执行折叠逻辑
        click(d);
      });
  

• 保持原有折叠逻辑函数不变：
  确保click函数的折叠/展开逻辑正常运行：

  function click(d) {
    if (d.children) {
      d._children = d.children;
      d.children = null;
    } else {
      d.children = d._children;
      d._children = null;
    }
    update(d);
  }
  

修改完成后，点击父节点的任意区域（包括节点图形、文字、"+"按钮）均可触发子节点组的折叠/展开操作。

内容的提问来源于stack exchange，提问作者Marty