d3：同步兩個圖的鼠標懸停
[英]d3 : Synchronize mouseover for two plots
問題描述
我有兩個大小相同的圖（svg1和svg2）。 我想同步鼠標懸停即。 當用戶將鼠標懸停在[x0，y0]的sgv1上時，我希望將值顯示為兩個圖上的疊加圖。 我的問題是我要從原始數據中提取x0，y0和值，並且可以通過console.log打印它，但是沒有覆蓋。 這是我的代碼中的相應片段：
<script>
...
function drawplots(plot){
var focus1,focus2;
if (plot==1) {thisdata=data1; thissvg=svg1;focus=focus1;}
else {thisdata=data2; thissvg=svg2;focus=focus2;}
...
...
focus=thissvg.append("g").attr("class","focus").style("display","none")
.append("circle").attr("r",4.5).append("text")
.attr("x",9).attr("dy",".35em");
thissvg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function() { focus.style("display", null ); })
.on("mouseout" , function() { focus.style("display", "none"); })
.on("mousemove", function() {
var x0 = scalex0.invert(d3.mouse(this)[0]);
var index=bisectdata(thisdata,x0);
var y0 = (thisdata[index])[1];
var ypos=scaley0(y0);
var xpos=scalex0(x0);
var fe = d3.format(".1f keV");
var fs = d3.format("s");
var textvalue="[ "+fe(x0)+" , "+fs(y0)+" ]";
console.log(plot,textvalue);
focus.attr("transform", "translate(" + xpos + "," + ypos + ")");
focus.select("text").text(textvalue);
});
}
...
</script>
<body>
<div id="plot1">
<div id="plot2">
svg1=d3.selectAll("#plot1").append("svg").attr("width",width).attr("height",height);
svg2=d3.selectAll("#plot2").append("svg").attr("width",width).attr("height",height);
</body>
那么，如何使用相同的函數在兩個不同的svg上發生鼠標懸停事件？
謝謝。
1 個解決方案
解決方案1
0 2015-06-23 09:58:12
除非我誤解了你的問題，否則難道不是...
function mouseover (){
// this will be the element the event is fired on
//get the position using d3.event if relevant
rect1.style({
opacity: 1
});
// perform some other translation manipulation here if needed
rect2.style({
opacity: 1
})
//or you could d3...selectAll('rect') and then perform operations on all at the same time
}
var rect1 = d3...append("rect").on('mouseover', mouseover);
var rect2 = d3...append("rect").on('mouseover', mouseover);
然后是類似的共享功能。
在D3中的鼠標懸停時觸發兩個單獨的事件
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.