D3 X Axis Text and Tick Line Not Visible

Question

I'm having an issue with a D3 chart where my x axis text and tick lines are invisible. I can see both elements placed properly in web inspector on the chart, and I have stroke and stroke width on the tick lines, but I think I'm missing another piece. Here's the relevant part of my code:

var parentContainer = window.getComputedStyle(document.getElementById('#svgContainer'));
var margins = {top: 40, right: 20. bottom: 20, left: 20};
var svgWidth = parentContainer.width;
var svgHeight = parentContainer.height;
var height = svgHeight - margin.top - margin.bottom;
var width = svgWidth - margin.left - margin.right;

var svg = d3.select('svgContainer')
.append('svg')
.attr('width', svgWidth)
.attr('height', svgHeight)
.attr('transform, 'translate(' + margin.left + ',' + margin.top + ')');

 var xAxis = d3.svg.axis()
.scale(x)
.orient('top')
.innerTickSize(-height);

 svg.append('g')
.attr('class', 'xAxis')
.call(xAxis);

And here is my CSS/LESS:

#svgContainer {
width: 100%;
height: 500px;
.tick {
  line {
    fill: none;
    stroke: black;
  }
  text {
    font-size: 14px;
  }
}

I didn't include the rest of my chart code as it seems to be working correctly - the axis lines and text are in the correct spots and at the correct intervals, just not visible. Not sure what I'm missing. Thanks!

Answer 1

Use the height/width that includes the subtracted margin values.

var height = svgHeight - margin.top - margin.bottom;
var width = svgWidth - margin.left - margin.right;

var svg = d3.select('svgContainer')
.append('svg')
.attr('width', width)
.attr('height', height)
.attr('transform, 'translate(' + margin.left + ',' + margin.top + ')');

Answer 2

If you look at the documentation , you're gonna see:

Regardless of orientation, axes are always rendered at the origin.

So, your axis is there, but on the very top of the SVG, and you can't see it.

Solution : You have to translate it down:

svg.append('g')
    .attr('class', 'xAxis')
    .attr("transform", "translate(0," + margin.top + ")")
    .call(xAxis);

Here is a demo with your(*) code:

 var margin = {top: 40, right: 20, bottom: 20, left: 20}; var svgWidth = 500; var svgHeight = 200; var height = svgHeight - margin.top - margin.bottom; var width = svgWidth - margin.left - margin.right; var svg = d3.select('body') .append('svg') .attr('width', svgWidth) .attr('height', svgHeight) .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); var x = d3.scale.linear() .range([0, width]); var xAxis = d3.svg.axis() .scale(x) .orient('top') .innerTickSize(-height); svg.append('g') .attr('class', 'xAxis') .attr("transform", "translate(0," + margin.top + ")") .call(xAxis); 

 path, line { fill: none; stroke: black; shape-rendering: crispEdges; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 

*: your code is full of problems, from undefined variables and properties to missing quotes. I suggest you revise it. Besides that, there is no point in translating an SVG (which doesn't work), that part of the code requires a group instead.