d3js v4: Only show labels on x-axis

Question

I\'m creating a stacked bar chart. I would like to show only the tick\'s label text on the x-axis, but without the ticks and the horizontal x-axis line.

How do I go

Answer 1

Put this is the CSS:

.axis path, .axis line {
  fill: none;
  stroke: none;
}

Here is a demo:

var svg = d3.select("svg");
var x = d3.scaleLinear().domain([1, 10]).range([10, 390])
svg.append('g')
  .attr('class', 'axis')
  .attr('transform', 'translate(0,50)')
  .call(d3.axisBottom(x));

.axis path, .axis line {
  fill: none;
  stroke: none;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="400" height="80"></svg>