Use graph ticks to make axis more readable

This commit is contained in:
Dmitriy Zaporozhets 2013-06-25 12:39:58 +03:00
parent d40e6bc228
commit 8fb84104e4

View file

@ -71,7 +71,7 @@ class window.ContributorsMasterGraph extends ContributorsGraph
super @width, @height super @width, @height
create_axes: -> create_axes: ->
@x_axis = d3.svg.axis().scale(@x).orient("bottom") @x_axis = d3.svg.axis().scale(@x).orient("bottom")
@y_axis = d3.svg.axis().scale(@y).orient("left") @y_axis = d3.svg.axis().scale(@y).orient("left").ticks(5)
create_svg: -> create_svg: ->
@svg = d3.select("#contributors-master").append("svg") @svg = d3.select("#contributors-master").append("svg")
.attr("width", @width + @MARGIN.left + @MARGIN.right) .attr("width", @width + @MARGIN.left + @MARGIN.right)
@ -130,8 +130,8 @@ class window.ContributorsAuthorGraph extends ContributorsGraph
create_scale: -> create_scale: ->
super @width, @height super @width, @height
create_axes: -> create_axes: ->
@x_axis = d3.svg.axis().scale(@x).orient("bottom").tickFormat(d3.time.format("%m/%d")); @x_axis = d3.svg.axis().scale(@x).orient("bottom").ticks(8)
@y_axis = d3.svg.axis().scale(@y).orient("left") @y_axis = d3.svg.axis().scale(@y).orient("left").ticks(5)
create_area: (x, y) -> create_area: (x, y) ->
@area = d3.svg.area().x((d) -> @area = d3.svg.area().x((d) ->
parseDate = d3.time.format("%Y-%m-%d").parse parseDate = d3.time.format("%Y-%m-%d").parse
@ -148,7 +148,7 @@ class window.ContributorsAuthorGraph extends ContributorsGraph
.append("g") .append("g")
.attr("transform", "translate(" + @MARGIN.left + "," + @MARGIN.top + ")") .attr("transform", "translate(" + @MARGIN.left + "," + @MARGIN.top + ")")
draw_path: (data) -> draw_path: (data) ->
@svg.append("path").datum(data).attr("class", "area-contributor").attr("d", @area); @svg.append("path").datum(data).attr("class", "area-contributor").attr("d", @area)
draw: -> draw: ->
@create_scale() @create_scale()
@create_axes() @create_axes()