Question

我尝试使用画笔选择，工具提示和点击事件的组合创建散点图，但似乎一旦我将画笔添加到svg画布，对象上的所有点击事件都会映射到鼠标悬停。有没有办法解决？下面的示例代码和@ 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个人正确行动？

Answer 1

单击事件未转换为mousover，它们根本就不会发生 - 您看到的鼠标悬停事件是将光标移动到圆圈上以单击它。这个问题有一个简单的解决方案 - 您需要做的就是在圈子上将pointer-events设置为all。

完整示例here。

d3：画笔更改单击鼠标悬停

1 个答案: