[英]d3: brush changes click to mouseover
我正在嘗試使用畫筆選擇,工具提示和單擊事件的組合來創建散點圖,但是似乎一旦將畫筆添加到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個組件正確執行操作?
click事件不會轉換為mousover,它們根本不會發生-您將鼠標移到圓圈上以單擊它時看到的mouseover事件。 但是,該問題有一個簡單的解決方案-您所需要做的就是將pointer-events
設置為圈子中的all
。
這里完整的例子。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.