我正在尝试结合画笔选择、工具提示和单击事件来创建散点图,但似乎一旦我将画笔添加到 svg Canvas ,对象上的所有单击事件都会映射到鼠标悬停。有没有办法解决?下面的示例代码和@ 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()
,您可以通过注释掉该行来获得相同的操作来触发正确的事件
svg.call(brush);
但是显然你松开了画笔......有没有办法让所有 3 个都正确运行?
最佳答案
单击事件不会转换为鼠标悬停,它们根本就没有发生 - 您看到的鼠标悬停事件是当您将光标移到圆圈上以单击它时。然而,这个问题有一个简单的解决方案——您所需要做的就是将pointer-events
设置为圆圈上的all
。
完整示例 here .
关于javascript - d3 : brush changes click to mouseover,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23527525/