d3 : 为两个绘图同步鼠标悬停答案

【问题标题】：d3 : Synchronize mouseover for two plotsd3 : 为两个绘图同步鼠标悬停
【发布时间】：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 上设置鼠标悬停事件？

谢谢。

【问题讨论】：

标签： javascript d3.js

【解决方案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 共享功能。

【讨论】：