score:1

Accepted answer

The most safe way to specify the values in a D3 axis is using axis.tickValues. In your case:

.tickValues(d3.range(axisScale.domain()[0], axisScale.domain()[1] + 10, 10));

Here is your code with that change:

var svgContainer = d3.select("body").append("svg")
  .attr("width", 700)
  .attr("height", 100);

var axisScale = d3.scale.linear()
  .domain([0, 50])
  .range([0, 400]);
var xAxis = d3.svg.axis()
  .scale(axisScale)
  .tickValues(d3.range(axisScale.domain()[0], axisScale.domain()[1] + 10, 10));

var xAxisGroup = svgContainer.append("g")
  .attr("transform", "translate(20,50)")
  .call(xAxis);
path,
line {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>


Related Query

More Query from same tag