block by vicapow 9539214

modifications to the axis ticks

Full Screen

index.html

<!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="//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>