javascript - d3.js:单击相当于 mouseout

Question

我所说的相当于 mouseout 的单击的意思是，我想要一种方法来单击元素以更改某些属性，然后当我单击该元素以外的任何内容时将其更改回来。使用悬停切换此属性更改很容易，因为您可以根据鼠标悬停和鼠标移出更改内容，但我不确定如何根据单击事件执行相同的操作。

所以我有一个带有圆圈的 svg 元素，单击它们时会显示红色轮廓。我知道一次只能选择一个圆圈，但是我不知道如何在单击 svg 的非圆圈部分时取消选择所有节点。如果这还不够清楚，我可以创建一个 jsfiddle 来演示我目前拥有的内容。

我通过阅读许多示例了解了选择的工作知识，但似乎无法弄清楚我应该采取什么方法来实现这一目标。

Answer 1

你可以使用 d3.dispatch设置一些自定义事件处理。有时，将不同的行为与布局代码的其余部分分开有助于使事情井井有条。

您可能希望一个函数取消突出显示所有可点击的圆圈，而另一个函数切换单个圆圈。然后当svg被点击时，你可以根据是否点击圆圈来决定是否全部取消高亮。

换句话说...

单击圆圈时，切换它。

当单击 svg 文档时，单击的不是圆圈，取消突出显示所有圆圈。

然后您可以为两个进程设置单独的调度事件。这很好，因为这样这些就变成了可重用的行为。例如，如果您稍后想要添加一个按钮来取消突出显示所有圆圈，或者想要在鼠标悬停在圆圈上时突出显示它，您可以调用相同的调度函数。

var dispatch = d3.dispatch('unhighlightAll','toggleSingle')
  // remove the `highlighted` class on all circles
  .on('unhighlightAll', function() {
    d3.selectAll('.clickable-circle').classed('highlighted', false);
  })
  // toggle the `highlighted` class on element `el`
  .on('toggleSingle', function(el) {
    d3.select(el).classed('highlighted', function() {
      return !d3.select(el).classed('highlighted');
    });
  });

最后，您从点击处理程序中调用调度函数:

svg.on('click', function() {
  // do nothing if a clickable circle is clicked
  if (d3.select(d3.event.target).classed('clickable-circle')) {
    return;
  } else {
  // otherwise unhighlight all circles
    dispatch.unhighlightAll();
  }
});

circles.on('click', function() {
  dispatch.toggleSingle(this);
});

然后剩下的就是决定如何显示 highlighted 类，并在您的 css 中处理它。

这是一个演示 JSBin

--编辑--

我刚刚意识到，由于您正在尝试模仿 mouseout，因此您可能不需要多选。您只需要稍微更改 toggleSingle 函数:

dispatch.on('toggleSingle', function(el) {
    // store state of current element
    var highlighted = d3.select(el).classed('highlighted');
    // unhighlight all
    dispatch.unhighlightAll();
    // set opposite of stored state
    d3.select(el).classed('highlighted', !highlighted);
  });

这是更新的 JSBin .