score:1

Accepted answer

In the zoom function svg.select(".state") selects only the first group of bars, svg.selectAll(".state") selects all groups.

Grouping all states in a "g" element with the new variable allStates

  var allStates = svg.append("g")
      .attr("class", "allStates");

and referencing to this new variable

 var state = allStates.selectAll(".state")
  .data(data)
  .enter().append("g")
  .attr("class", "state")
  .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; });

and also in zoom function

svg.select(".allStates").attr("transform", "translate(" + d3.event.translate[0]+",0)scale(" + d3.event.scale + ",1)");

on doubleclick event it will zoom over all the states


Related Query

More Query from same tag