score:1

Accepted answer

The axis is comprised of text, line, and path elements. If you want to remove the path and line elements, and have no other path or line elements elsewhere, you could simply select them and remove them:

 d3.selectAll("path,line").remove();

However, you could also keep a reference for your parent g elements (especially if there are other elements that are paths or lines elsewhere), and use parentSelection.selectAll("path,line").remove(); instead, as I've done below:

var width = 500, height = 300;

var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);
  
var scale = d3.scaleLinear()
  .domain([0,100])
  .range([0,width])
  
var axis = svg.append("g")
  .attr("transform","translate("+[0,width/2]+")");
 
axis.call(d3.axisBottom(scale));

axis.selectAll("path,line")
   .style("opacity",1)
   .transition()
   .duration(2000)
   .style("opacity",0)
   .remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

The axis generator also gives classes to the ticks and the paths, so you could also select elements referencing the class names:

var width = 500, height = 300;

var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);
  
var scale = d3.scaleLinear()
  .domain([0,100])
  .range([0,width])
  
var axis = svg.append("g")
  .attr("transform","translate("+[0,width/2]+")");
 
axis.call(d3.axisBottom(scale));

axis.selectAll(".domain,.tick>line")
   .style("opacity",1)
   .transition()
   .duration(2000)
   .style("opacity",0)
   .remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>


Related Query