点击d3突出显示特定条形图

Question

我有一个负的堆积条形图，onclick显示与该条相关联的图像。这些酒吧也会改变颜色。我想要做的是反转这种效果，这样当用户点击图像时，与该图像相关联的所有条形都将变为悬停的颜色。

更新了数据集：

 var ratiodata = [[{y:4.2, corr:"682825.jpg"},{y:3.7, corr: "682791.jpg"},{y:3.3, corr:"682825.jpg"},{y:2.7, corr: "682759.jpg"}],

               [{y:-1.9},{y:-1.3},{y:-1.5},{y:-1.2}]]

 var wordcount =[ [4.2, 22, -1.9, 10, 518, ["682825.jpg"]],
              [3.7, 41, -1.3, 14, 1117, ["682791.jpg"]],
              [3.3, 28, -1.5, 13, 857, ["682825.jpg"]],
              [2.7, 27, -1.2, 12, 1010, ["682759.jpg"]]             
                        ];

更新了onclick：

var s;
            d3.select("#VGcorrsbox")
              .selectAll("img")
              .data(wordcount[i][5])
              .enter()
              .append("img")
              .classed("VGcorrs",true)
              .attr("src", wordcount[i][5])             
              .on("click", function(d,i) 
            {
                    for (var i = 0; i < wordcount.length; i++){      
                         if(s){
                            s="";
                            d3.selectAll(".series")
                            d3.selectAll(".bar")
                            .style("fill", function(d,i) { return color(i)})    
                         }
                          else {                                 
                         s = d3.select(this).attr("src")
                            d3.selectAll(".series")
                            d3.selectAll(".bar")
                              .filter(function(d,i) {
                                return d.corr == s;
                              })
                             .style("fill", "#C79E4C"); 

                          }
                    }
            });