title: D3js : mouseover of one element change opacity of several others elements
body: <p>Thanks to previous answers, I've made <a href="http://raphi.m0le.net/data/BAS/App_d3_strasrk/carte_ip.html" rel="nofollow noreferrer">a map and a related graph with D3js</a>.</p>
  
  <p>The bar and the map are in specific divs, and I don't use the same data source. That's a part of my problem. </p>
  
  <p>For the map, I used queue.js to load several files at a time. One of these files is a .csv which follow specifically the same order than the geojson where polygons are stocked. If I sort differently .csv's data, the correspondance with my .geojson's polygons is bad and my choropleth map become false.</p>
  
  <p>Here's the associated code for the interactive polygons of the map :    </p>
  
  <pre><code>  svg.append("g").attr("class","zones")
      .selectAll("path")
      .data(bureaux.features)   //"bureaux" is a reference to the geojson
      .enter()
        .append("path")
        .attr("class", "bureau")
        .attr("d", path)
        .attr("fill", function(d,i){
            if (progression[i].diff_ries&lt;-16.1){  //"progression" is the reference to my .csv
          return colors[0] // colors is a previous array with the choropleth's colors
        }
        else if (progression[i].diff_ries&lt;-12.6){
          return colors[1]
        }
         else if (progression[i].diff_ries&lt;-9){
          return colors[2]
        }
        else {return colors[3]
        }
      })
      .on('mouseover', tip.show) // tip.show and tip.hide are specific functions of d3.js.tip
      .on('mouseout', tip.hide)
  
  };
  </code></pre>
  
  <p>No problem here, <a href="http://raphi.m0le.net/data/BAS/App_d3_strasrk/etape%202.html" rel="nofollow noreferrer">the code works fine</a>. We arrived now to the graph. He used a .json array called at the beginning of the script, like this</p>
  
  <pre><code>var array=[{"id_bureau":905,"diff_keller":4.05,"diff_ries":-15.02},{etc}];
  </code></pre>
  
  <p>"id_bureau" is the common' index of my .geojson, my .csv and this .json's array. Then, I sort the array with a specific function. Here's a part of the code associated to the graph :</p>
  
  <pre><code>svg2.selectAll(".bar")
  .data(array)   
  .enter().append("rect")
  // I colour on part of the bars like the map
  .attr("fill", function(d,i){
            if (array[i].diff_ries&lt;-16.1){
          return colors[0]
        }
        else if (array[i].diff_ries&lt;-12.6){
          return colors[1]
        }
         else if (array[i].diff_ries&lt;-9){
          return colors[2]
        }
        else {return colors[3]
        }
      })
  .attr("x", function (d) {
  return x(Math.min(0, d.diff_ries));
  })
  .attr("y", function (d) {
  return y(d.id_bureau);
  })
  .attr("width", function (d) {
  return Math.abs(x(d.diff_ries) - x(0));
  })
  .attr("height", y.rangeBand());
  
  // this part is for the other bars
  svg2.selectAll(".bar")
  .data(tableau)
  .enter().append("rect")
  // the others bars are always blue, so I used a simple class
  .attr("class", "bar_k")
  .attr("x", function (d) {
  return x(Math.min(0, d.diff_keller));
  })
  .attr("y", function (d) {
  return y(d.id_bureau);
  })
  .attr("width", function (d) {
  return Math.abs(x(d.diff_keller) - x(0));
  })
  .attr("height", y.rangeBand());
  
  svg2.append("g")
  .attr("class", "x axis")
  .call(xAxis);
  
  svg2.append("g")
  .attr("class", "y axis")
  .append("line")
  .attr("x1", x(0))
  .attr("x2", x(0))
  .attr("y2", height2);
  </code></pre>
  
  <p>So now, what I wan't to do is, when the mouse is over one polygon, to keep the correspondent bar of the graph more visible than the others with an opacity attribution (and when the mouse out, the opacity of all the graph returns to 1).</p>
  
  <p>Maybe it seems obvious, but I don't get how I can correctly link the map and the graph using the "id_bureau" because they don't follow the same order like in this question : <a href="https://stackoverflow.com/questions/19919708/change-class-of-one-element-when-hover-over-another-element-d3">Change class of one element when hover over another element d3</a>.</p>
  
  <p>Does somebody know if I can easily transform the <code>mouseover</code> and <code>mouseout</code> events in the map's part to change at the same time my graph?</p>