我所说的相当于 mouseout 的单击的意思是,我想要一种方法来单击元素以更改某些属性,然后当我单击该元素以外的任何内容时将其更改回来。使用悬停切换此属性更改很容易,因为您可以根据鼠标悬停和鼠标移出更改内容,但我不确定如何根据单击事件执行相同的操作。
所以我有一个带有圆圈的 svg 元素,单击它们时会显示红色轮廓。我知道一次只能选择一个圆圈,但是我不知道如何在单击 svg 的非圆圈部分时取消选择所有节点。如果这还不够清楚,我可以创建一个 jsfiddle 来演示我目前拥有的内容。
我通过阅读许多示例了解了选择的工作知识,但似乎无法弄清楚我应该采取什么方法来实现这一目标。
最佳答案
你可以使用 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 .
关于javascript - d3.js:单击相当于 mouseout,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24704450/