Transition On Axis -- Losing Grid Lines (ticksize), How To Transition In Correct Order?

I've got a horizontal bar graph with transition on the x-axis. It looks exactly how I want, almost. Sadly, the red gridlines (tickSize(-h)) are in the back. I need to bring them t

Solution 1:

This is because you missed initializing the bars before initializing the axis, you can add init bars code before initAxes() and keep all your other codes no change.

d3.csv("georgia_counties_vmt.csv", function(input) {

  ...
  y.domain(data.map(function(d) { return d.name; }));

  initBars(); // init bars before init axesinitAxes();
  change(); 


}); // close d3.csv ...

...

// new added function to init barsfunctioninitBars() {
  var bar = svg.selectAll("g.bar")
      .data(data)
      .attr("class", "bar");

  var barEnter = bar.enter().append("g")
    .attr("class", "bar")
    .attr("transform", function (d) {return"translate(0," + (d.y0 = (y(d.name))) +")" ;});

  barEnter.append("rect")
    .attr("width", 0)
    .attr("height", y.rangeBand()/2);
}