title: Mouseover event on two charts at the same time d3.js
body: <p>The code in the link is for two pie charts.  <a href="http://jsbin.com/vipodidiyo/edit?html,css,js,outputThey" rel="nofollow noreferrer">http://jsbin.com/vipodidiyo/edit?html,css,js,outputThey</a> are almost the same just different data and positions. When user mouseover a piece of pie, that piece and tooltip will pup up in that pie chart.</p>
  <p>My question is... when user mouseover a piece of pie, how can I make the popups happen in both of the charts. For example, if user mouseover the green part in the first pie chart, the green parts and tooltips in both charts will show up at the same time.</p>
  <p>How can I make two charts connected? Does anyone have clue about this? Appreciate!!</p>
  <h2>Updated</h2>
  <p>I found a similar question here and try to change the code follow Lars's answer. <a href="https://stackoverflow.com/questions/21031481/interactions-that-affect-multiple-separate-charts-in-d3-js">Interactions that affect multiple separate charts in d3.js?</a>
  I assigned a class name 'path', and changed  <code>d3.select(this)</code> to <code>d3.select('.path')</code>. But wherever my mouse is, the purple part of first pie chart pops up.
  Here is my updated JSbins <a href="http://jsbin.com/gozuyekibi/edit?html,css,js,output" rel="nofollow noreferrer">http://jsbin.com/gozuyekibi/edit?html,css,js,output</a></p>
  <pre><code>var path = svg.selectAll('path').
      data(pie(data)).
      enter().
      append('path').
      attr('d', arc).
      attr('class','path').
      //attr('id','pathid').
      attr('fill', function(d,i){
       return color(d.data.label);}). 
     on('mouseover', function(d) {
       d3.select('.path').transition()
        .duration(1000)
        .attr(&quot;d&quot;, arcHover);     
         var total = d3.sum(data.map(function(d) {
            return d.count;
         }));
         var percent = Math.round(1000 * d.data.count / total) / 10;
          tooltip.select('.label').html(d.data.label); 
          tooltip.select('.count').html(d.data.count); 
          tooltip.select('.percent').html(percent + '%'); 
          tooltip.style('display', 'block');
         }).       
      on('mouseout', function() {
       d3.select('.path').transition()
        .duration(500)
        .attr(&quot;d&quot;, arc);      
          tooltip.style('display', 'none');                    
        });
  </code></pre>