Skip to content

Instantly share code, notes, and snippets.

@vicapow
Last active August 29, 2015 13:57
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 vicapow/9539214 to your computer and use it in GitHub Desktop.
Save vicapow/9539214 to your computer and use it in GitHub Desktop.
modifications to the axis ticks
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body, html{
width: 960px;
height: 500px;
margin: 0;
}
.axis{
fill: none;
stroke: black;
}
.axis text{
fill: white;
stroke: none;
}
.axis circle{
fill: gray;
stroke: none;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<script>
var w = window.innerWidth, h = window.innerHeight
var m = 100
var svg = d3.select('body').append('svg')
.attr({width: w, height: h})
var x = d3.scale.linear().domain([0, w]).range([m, w - m])
var axis = d3.svg.axis().scale(x)
svg.append('g').attr('class', 'axis').call(axis)
.attr('transform', 'translate(' + [0, m] + ')')
svg.select('.axis').selectAll('g.tick')
.insert('circle', ':first-child').attr('r', 25).attr('cy', 15)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment