d3:刷更改点击鼠标悬停 [英] d3: brush changes click to mouseover
问题描述
我正在尝试使用画笔选择,工具提示和点击事件的组合创建一个散点图,但是似乎一旦我在一个svg画布上添加了一个画笔,对象的所有点击事件都将映射到鼠标滚轮。有没有办法解决?以下示例代码和@ http://jsfiddle.net/7j8cr/
I'm trying to create a scatter plot with a combination of brush selection, tooltips and click events, but it seems that once I add a brush to an svg canvas, all click events on objects get mapped to mouseovers. Is there any way around this? Example code below and @ http://jsfiddle.net/7j8cr/
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var my_circles = [{"x": 40, "y": 100, "r": 12},
{"x": 100, "y": 40, "r": 8}],
width = 400,
height = 400,
svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
function click(d) { console.log("Clicky Clicky!") };
function mouseover(d) { console.log("I saw mouse!") }
var brush = d3.svg.brush()
.x(d3.scale.identity().domain([0, width]))
.y(d3.scale.identity().domain([0, height]))
svg.call(brush);
svg.selectAll("dataObj")
.data(my_circles)
.enter().append("circle")
.attr("r", function(d) { return d.r })
.attr("cx", function(d) { return d.x })
.attr("cy", function(d) { return d.y })
.style("fill", "blue")
.on("mouseover", mouseover)
.on("click", click);
</script>
点击圈子触发 mouseover()
,您可以通过注释行
Clicking on the circles triggers mouseover()
, and you can get the same action to trigger the correct event by commenting out the line
svg.call(brush);
但是显然你松了刷....有没有办法让所有3的行为正确?
But then obviously you loose the brush.... is there a way to get all 3 acting correctly?
推荐答案
点击事件没有被翻译成mousover,他们根本没有发生 - 你看到的鼠标悬停事件是什么时候您将光标移动到圆圈上以单击它。这个问题有一个简单的解决方案,但是您所需要做的就是将指针事件
设置为所有
。
The click events are not getting translated to mousover, they are simply not happening -- the mouseover event you see is when you move the cursor over the circle to click it. The problem has an easy solution however -- all you need to do is set pointer-events
to all
on the circles.
完整的例子 here 。
这篇关于d3:刷更改点击鼠标悬停的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!