Dealing with x-axis grid line formatting issues in a D3.js graph that I've created.
var data = [{
x: '12-May-12',
y: 5
}, {
x: '30-Apr-12',
y: 28
} // more data points listed here
var margin = {
top: 30,
right: 20,
bottom: 35,
left: 50
},
// other code for setting up scales, axes, and chart elements omitted for brevity
// How do I format the x-axis grid to match the grid shown in the picture linked above?
// Also, how can I create space between the axis lines and tick values?
// CSS styling for various elements in the chart
// CSS code truncated for brevity
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="d3-chart">
<div class="d3_charts"></div>
</div>https://i.sstatic.net/Ep9NJ.png
Seeking advice on formatting the x-axis grid to match a specific style and adding space between axis lines and tick values.