score:5

Accepted answer

It's easier to handle groups of elements if you bunch them together with g elements. In your case, you would have one g for each row and attach the elements and handlers to that. Then, on mouse events, you simply need to select all the descendant elements of the group to operate on.

I've modified your jsfiddle to that here. The key things are the creation of the groups

var gs = shapes.selectAll("g").data(dataset)
  .enter()
  .append("g")
  .attr("id",function(d, i) {return i;})
  .attr("transform",function(d, i) {return "translate(0," + i*100 + ")";})
  .on("mouseover", over)
  .on("mouseout", out);

and the much-simplified event handlers

function over(d, i) {
  d3.select(this).selectAll("*").style("fill", "green");
}

Related Query