D3 axis can be configured using its properties. Please have a look on the link so you will get a better idea for implementation

  • d3 axis associated with d3.scale
  • scale domain values to be visually encoded in pixels by range.
  • Length of the axis will always with in the range.

To achieve negative values regardless of the domain, make a default negative minimum value in scale domain. By providing this you can have the axis alway starts with the negative value.

var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 400-margin.left - margin.right,
    height = - margin.bottom;

var y = d3.scale.linear()
	.domain([-10, 10])
    .range([height, 0]);

var yAxis = d3.svg.axis()

var svg ="body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + + margin.bottom)
    .attr("transform", "translate(" + margin.left + "," + + ")");

    .attr("class", "y axis")
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
<script src=""></script>

Related Query