d3 : 为两个绘图同步鼠标悬停
Posted
技术标签:
【中文标题】d3 : 为两个绘图同步鼠标悬停【英文标题】：d3 : Synchronize mouseover for two plots 【发布时间】：2015-06-22 22:16:52 【问题描述】：我有两个大小相同的地块（svg1 和 svg2）。我想同步鼠标悬停，即。当用户将鼠标悬停在点 [x0,y0] 的 sgv1 上时，我希望将值显示为两个图上的叠加层。我的问题是我正在从原始数据中提取 x0,y0 和值，并且可以通过 console.log 打印它，但没有覆盖。以下是我的代码中对应的 sn-ps：
<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】：除非我看错了你的问题，否则不是很简单......
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);
然后是类似的 mouseout 共享功能。
【讨论】：
以上是关于d3 : 为两个绘图同步鼠标悬停的主要内容，如果未能解决你的问题，请参考以下文章