score:1

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 = 200-margin.top - margin.bottom;

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

var yaxis = d3.svg.axis()
    .scale(y)
    .orient("left");

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

    svg.append("g")
    .attr("class", "y axis")
    .call(yaxis)
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispedges;
}
<script src="https://d3js.org/d3.v3.min.js"></script>


Related Query

More Query from same tag