How to control the number of tick values in a graph with d3js

Question

I have a graph, it works fine. but only thing is, i would like to reduce the tick-size. how to do that?

example: my current graph has ticks start from 0 to 100 it counts as 11 numbers.(by 10) how can i reduce this in to 6 number like starting from 0 and ending with 100 - but instead of 10 repeat to 20 repeat like 0, 20,40,60..?

here is my code :

$(function(){
 var m = [80, 80, 80, 80]; // margins
        var w = 300; // width
        var h = 450; // height

        var plan = 55;
        var actual = 38;
        var variation = plan - actual;

        var data = [0,plan];
        var data1 = [0,actual];

        var x = d3.scale.linear().domain([0, 1.25]).range([0, w]);
        var y = d3.scale.linear().domain([0, 100]).range([h, 0]);


        var line = d3.svg.line()

            .x(function(d,i) { 
                return x(i); 
            })
            .y(function(d) { 

                return y(d); 
            })


            var graph = d3.select("#graph").append("svg:svg")
                  .attr("width", w + m[1] + m[3])
                  .attr("height", h + m[0] + m[2])
                .append("svg:g")
                  .attr("transform", "translate(" + m[3] + "," + m[0] + ")");


            var yAxisLeft = d3.svg.axis()
            .scale(y).tickSize(-w)
            .orient("left");

            graph.append("svg:g")
                  .attr("class", "y axis")
                  .attr("transform", "translate(-0,0)")
                  .call(yAxisLeft);


                graph.append("svg:path").attr("d", line(data));
            graph.append("svg:path").attr("d", line(data1));

            //not able to fill the bg between 2 lines

            var area = d3.svg.area()
      .x(function(d, i) { return x(i) })
      .y0(function(d, i) { return y(data[i]); })
      .y1(function(d, i) {  return y(data1[i]); })

    graph.append("path")
      .datum(data)
      .attr("d", area)
      .attr("fill", "brown")
      .style("opacity", 0.5);

});

Live Demo

Answer 1

I have updated the tick values like this:

$(function(){
 var m = [80, 80, 80, 80]; // margins
        var w = 300; // width
        var h = 450; // height

        var plan = 55;
        var actual = 38;
        var variation = plan - actual;

        var data = [0,plan];
        var data1 = [0,actual];

        var x = d3.scale.linear().domain([0, 1.25]).range([0, w]);
        var y = d3.scale.linear().domain([0, 100]).range([h, 0]);


        var line = d3.svg.line()

            .x(function(d,i) { 
                return x(i); 
            })
            .y(function(d) { 

                return y(d); 
            })


            var graph = d3.select("#graph").append("svg:svg")
                  .attr("width", w + m[1] + m[3])
                  .attr("height", h + m[0] + m[2])
                .append("svg:g")
                  .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

            var yAxisLeft = d3.svg.axis()
            .scale(y)
            .tickValues(d3.range(0, 120, 20))
            .tickSize(-w)
            .orient("left");



            graph.append("svg:g")
                  .attr("class", "y axis")
                  .attr("transform", "translate(-0,0)")
                  .call(yAxisLeft);


                graph.append("svg:path").attr("d", line(data));
            graph.append("svg:path").attr("d", line(data1));

            //not able to fill the bg between 2 lines

            var area = d3.svg.area()
      .x(function(d, i) { return x(i) })
      .y0(function(d, i) { return y(data[i]); })
      .y1(function(d, i) {  return y(data1[i]); })

    graph.append("path")
      .datum(data)
      .attr("d", area)
      .attr("fill", "brown")
      .style("opacity", 0.5);

});

Live Demo