Question

我有一个带有子项和子项的树形布局。此布局支持折叠。点击任何节点，它将崩溃，再次点击它将展开。我想避免某些节点的这种影响。我该怎么办？

Answer 1

崩溃/展开操作是通过.click处理程序触发的。如果要禁用它，请为这些节点设置空处理程序。代码看起来像这样。

nodes.on("click", function(d) {
  if(d.condition) {
    // handler for collapsing/expanding
  }
  // if condition is not met, do nothing on click
});

Answer 2

实现此目的的一种方法是禁用您不想响应点击处理程序的节点的指针事件。

nodes
  // Make sure all nodes' pointer events are reset to 'all'.
  .attr('pointer-events', 'all')
  // Filter the nodes based upon a condition.
  .filter(function(d) { return d.condition; })
  // Set the pointer events for the filtered nodes to 'none'.
  .attr('pointer-events', 'none');

这样做的另一个好处是，如果这是您想要的行为，那么不应该响应点击的节点也不会响应鼠标悬停等其他鼠标事件。例如，如果您的节点不响应点击需要响应鼠标悬停/鼠标移动事件，请使用Lars的解决方案。

如何避免在d3 js中点击树布局的某些节点

2 个答案: