d3: Синхронизация мыши для двух графиков

У меня есть два графика (svg1 и svg2), которые идентичны по размеру. Я хочу синхронизировать mouseover ie. когда пользовательская мышь превышает sgv1 в точке [x0, y0] Я хочу, чтобы значения отображались как оверлеи на обоих графиках. Моя проблема в том, что я извлекаю x0, y0 и значение из необработанных данных и могу распечатать его с помощью console.log, но нет наложения. Вот соответствующие фрагменты из моего кода:d3: Синхронизация мыши для двух графиков

<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>

Так как я использую ту же функцию, чтобы события наведения курсора мыши на два разных SVGs?

Спасибо.

источник

2015-06-22 user3259040

Если я не неправильно ваш вопрос, не так же просто, как ...

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);

И тогда подобная разделяемой функция отведении указателя мыши.

источник

2015-06-23 09:58:12 bowcot84

d3: Синхронизация мыши для двух графиков

ответ

Смежные вопросы