Skip to content

Instantly share code, notes, and snippets.

@tomgp

tomgp/index.html

Last active August 29, 2015 14:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tomgp/aaf0499e139e0b8c58ea to your computer and use it in GitHub Desktop.
Save tomgp/aaf0499e139e0b8c58ea to your computer and use it in GitHub Desktop.
Download ZIP
adding a particular date to an SVG axis
Raw
readme.md

#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?

Raw
index.html
<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="http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment