Selecting elements of multiple bar charts at the same time

[Anthony Lazzaro]

So basically what I am trying to do is have two identical bar charts that when I hover over an element of one of them it highlights the respective element in the other identical bar chart.

Alternately I could have one bar chart that when I hover over one element it highlights an element three away from it.

The following is the basic code to get a bar chart that when you hover over an element it appears.

var bar1 = svg.selectAll(".bar1")

.data(data).enter()

.append("rect")

.attr("x", function(d, i) {return i *  (width/2) *  (1/ data.length) ;})

.attr("y", 0)

.attr("width", width  / data.length - 1 )

.attr("height", height)

 .attr("opacity", 0)

.style("fill", "rgb(0,0,0)");

var bar2 = svg.selectAll(".bar1")

.data(data).enter()

.append("rect")

.attr("x", function(d, i) {return i * (width/2) *  (1/ data.length) + width ;})

.attr("y", 0)

.attr("width", width  / data.length - 1)

.attr("height", height)

 .attr("opacity", 0)

.style("fill", "rgb(0,0,0)");

bar1.on("mouseover", function(){d3.select(this).attr("opacity", 0.2);} )

.on("mouseout", function(){d3.select(this).attr("opacity", 0);} )

.on("mouseup", function(){d3.select(this).attr("opacity", 0);} )

.on("mousedown", function(){d3.select(this).attr("opacity", 0);});

bar2.on("mouseover", function(){d3.select(this).attr("opacity", 0.2);} )

.on("mouseout", function(){d3.select(this).attr("opacity", 0);} )

.on("mouseup", function(){d3.select(this).attr("opacity", 0);} )

.on("mousedown", function(){d3.select(this).attr("opacity", 0);});

but what I really want is to be able to do something like

bar1.on("mouseover", function(){

d3.select(this).attr("opacity", 0.2);

d3.select(bar2.this).attr("opacity", 0.2);

} )

Of course the above doesn't work or I wouldn't be asking this question.

[Anthony Lazzaro]

Maybe I can simplify the question. If you create a bunch of objects using selectAll() and a dataset, how do you reference an individual from that set of objects from an external object?

[Nikhil Sonnad]

If I understand your question correctly (let me know if I don't), one way to do this is to assign a CSS class or id that is data-driven, then passing that value the d3 selection on mouseover. So you could do:

var bar1 = svg.selectAll(".bar1")

.data(data).enter()

 .append("rect")

 .attr("class", function (d, i) { return 'bar' + i; })

          

var bar2 = svg.selectAll(".bar2")

.data(data).enter()

 .append("rect")

 .attr("class", function (d, i) { return 'bar' + i; })

d3.selectAll('rect').on('mouseover', function() {

    var rectClass = d3.select(this).attr('class');

   

    d3.selectAll('.' + rectClass)

        .attr('opacity', 0.2);

[Anthony Lazzaro]

Ah yes!! That works great! I guess I didn't realize that you could make selections based on the class attribute. Thanks a bunch!