D3 Examples - adding a particular date to an SVG axis

adding a particular date to an SVG axis

#testing an answer I got on stack overflow to the following query I've created an axis with d3.svg.axis and a time scale and am happy with the ticks produced by the tick generator. However, I would like to ensure that a particular value is always marked. So for example the if the generator produces the following dates

2000-1-1, 2001-1-1, 2002-1-1, 2003-1-1

I might want to make the axis show

2000-1-1, 2000-7-21, 2001-1-1, 2002-1-1, 2003-1-1

How do i get an array of the ticks made by the tick generator so that I can add my value and pass it into the tickValues function?

xxxxxxxxxx
 
<html>
<head>
    <title>Tweak axis ticks</title>
    <style type="text/css">
    path{
        fill:none;
        stroke:#333;
        shape-rendering:crispEdges;
    }
    line{
        fill:none;
        stroke:#333;
        shape-rendering:crispEdges;
    }
​
    text{
        font-family: sans-serif;
        font-size: 0.5rem;
    }
    </style>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<p>
</body>
<script type="text/javascript">
​
var specialDate = new Date(2001,4,14),
​
    timeScale = d3.time.scale()
        .range([100,900])
        .domain([new Date(2001,1,1), new Date(2001,11,1)]),
​
    ticks = timeScale.ticks();
​
ticks.push(specialDate);
​
d3.select('body')
    .append('svg')
    .attr({
        width:1000,
        height:200
    })
    .call( d3.svg.axis()
        .scale(timeScale)
        .tickFormat(d3.time.format('%b, %e'))
        .tickSize(5,5)
        .tickValues(ticks) );
​
​
</script>
</html>
    