Fix The X-axis Of D3 Js And Add Dotted Lines To The Y-axis And X-axis

Any help on how to do below implementations in D3 JS? Fix the position of the x-axis it shouldn't scroll In x-axis values are like -2.5, -2.0, -1.5, -1.0, 0, 1.0, 1.5, 2.0, 2.5 Ex

Solution 1:

1 - I dont quite understand the first question, because the xAxis seem to be fixed and not scrolling.

2 - The x-axis values seem to be all positive. But nevertheless you can get the desired format with the vales if you call the x-axis ticks like that:

.call(d3.axisBottom(x).tickFormat(function(d) { return d+"%" }));

This will also show the minus if the value is negative.

I'd personally recommend to map the vales to fractions of 1 (2.5% would be 0.025 ) and just:

.call(d3.axisBottom(x).tickFormat(d3.format(".0%"));

3 - For gridlines you can see sample code here: https://bl.ocks.org/d3noob/879316f32be861b6870c98a277076d1b with .attr('stroke-dasharray'='2');