Transition Of An Axis

To create my y-axis I've cobbled together this code: // Add y axis with ticks and tick markers var axisPadding = 2; var leftAxisGroup = svg .append('g') .style('font', '10px ve

Solution 1:

This really are two questions in one, but here are the answers:

1. You are right that there is no need for all that JavaScript code to target .domain and .tick as that can be achieved with CSS:

   .domain, .tick {
     stroke: black;
     shape-rendering: crispEdges;
   }
   
   .domain {
     fill: none;
   }
   

2. To create an axis, you do the following:

   var yAxis = d3.svg.axis()
     .orient("left")
     .scale(yScale);
   
   var domYAxis = mainGroup.append("g")
     .call(yAxis);
   

   To animate an axis, you just need to add a transition before the call:

   var domYAxis = mainGroup.append("g");
   domYAxis.transition()
     .duration(750)
     .call(yAxis);