Major ticks in d3.js

Question

I plotted a d3 graph in which in have many dates and those dates gets increased day by day so my x axis looks grabled with so many daes so I want to set major ticks in my graph n xaxis. I tried but not able to get it.So please suggest. Here is my code:

<div id="chart"></div>
    </div>
    <script>
    var jsonURL = 'avb.json';

    var myData = [];
    var fliterdata = [];
    var tempdata = [];
    var selectop = "";
    var selectDate = false;
    var chartType = chartType || 'bar';

    function filterJSON(json, key, value) {
        var result = [];
        for (var foo in json) {
         var extractstr = json[foo][key] ;
          extractstr=String(extractstr);

            if (extractstr.slice(3)== value) {

                result.push(json[foo]);
            }
        }
        return result;
    }

    function selectValue(d) {
        switch (selectop) { //d object select particular value for Y axis 
            case "01":
                return d.val001;
                break;
            case "02":
                return d.val002;
                break;
            default:
                //console.log("default");
                return d.val001;
        }
    }

    var margin = {
        top: 20,
        right: 0,
        bottom: 80,
        left: 40
    };
    var width = 700 - margin.left - margin.right;
    var height = 500 - margin.top - margin.bottom;



    var xScale = d3.scale.ordinal().rangeRoundBands([0, width], .1);
    var xAxis = d3.svg.axis()
     .scale(xScale)
      .tickValues(xScale.domain().filter(function(d, i) { return !(i % 2);                       }))
   .orient("bottom");

    var yScale = d3.scale.linear().range([height, 0]);
    var hAxis = d3.svg.axis().scale(xScale).orient('bottom').tickFormat(d3.time.format("%Y-%m-%d"));
    var vAxis = d3.svg.axis().scale(yScale).orient('left');
    var tooltip = d3.select('body').append('div')
        .style('position', 'absolute')
        .style('background', '#f4f4f4')
        .style('padding', '5 15px')
        .style('border', '1px #333 solid')
        .style('border-radius', '5px')
        .style('opacity', 'o');

    var line = d3.svg.line()
        .x(function(d) {
            return xScale(d.date);
        })
        .y(function(d) {
            return yScale(selectValue(d));
        })
        .interpolate("monotone")
        .tension(0.9);


    function render(filterByDates) {


        d3.select('svg').remove();

        if (filterByDates) {
            selectDate = true;
            tempData = fliterdata;
            console.log("before date fliter data", tempData);
            var date1 = new Date(document.getElementById('field1').value);
            var date2 = new Date(document.getElementById('field2').value);

            tempData = tempData.filter(function(d) {
                console.log(date1, date2);
                //  alert(date1);
                return d.date >= date1 && d.date <= date2;
            });
        }


        xScale.domain(tempData.map(function(d) {
            return d.date;
        }).sort(function(a, b) {
            return a > b;
        }));

        yScale.domain([0, d3.max(tempData, function(d) {
            return +selectValue(d);
        })]);

        var svg = d3.select('#chart').append('svg')
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        svg

            .append('g')
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(hAxis)
            .selectAll("text")
            .style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", "-.55em")
            .attr("transform", "rotate(-90)");

        svg
            .append('g')
            .attr("class", "yaxis")
            .call(vAxis)

        if (chartType == 'bar') {
            svg
                .selectAll(".bar") //makes bar
                .data(tempData)
                .enter().append("rect")
                .attr("class", "bar")
                .style("fill", "red")
                .attr("x", function(d) {
                    return xScale(d.date);
                }).attr("width", xScale.rangeBand())
                .attr("y", function(d) {


                    return yScale(selectValue(d));
                }).attr("height", function(d) {

                    console.log("as", d.value);
                    return height - yScale(selectValue(d));
                }).on('mouseover', function(d) {
                    tooltip.transition()
                        .style('opacity', 1)

                    tooltip.html(d.value)
                        .style('left', (d3.event.pageX) + 'px')
                        .style('top', (d3.event.pagey) + 'px')
                    d3.select(this).style('opacity', 0.5)
                }).on('mouseout', function(d) {
                    tooltip.transition()
                        .style('opacity', 0)
                    d3.select(this).style('opacity', 1)
                });
        }

        if (chartType == 'line') {
            svg.append("path") // Add the line path.
                .data(tempData)
                .attr("class", "line")
                .attr("d", line(tempData));
        }

    }

    d3.json(jsonURL, function(data) {

        myData = data; //data from json in mydata
        myData.forEach(function(d) {

            d.date = new Date(d.date);
        });

        $("#listbox").on("click", function() {

            var key = $(this).val();
            console.log("key:", key);
            var value = $('#listbox option:selected').text();
            //value = "int" + value;
            console.log("vaue:", value);

            selectop = String(key);

            selectop = selectop.slice(-2);
            console.log("mydata: ", myData);
            console.log("selectops:", selectop);

            fliterdata = filterJSON(myData, key, value); //selected value from user and picks the whole element that contains that attribute
            tempData = fliterdata; //graph made by temp data
            if (selectDate)
                render(true);
        });
    });

    function selectChartType(type) {
        chartType = type;
        render(true);
    }
    </script>
</body>
</html>

{
"name": "ABC",
 "date": 1461176704000,
 "attr001": "intSIGN1",
 "val001": "200", 
"attr002": "intSIGN2", 
"val002": "70", 
"attr003": "dt1SIGN3", 
"val003": "57.5",
 "attr004": "intSIGN4",
 "val004": "670",
 "attr005": "strSIGN5", 
"val005": "Traceinvalid"
 }, 

{ "name": "ABC",
 "date": 1459125900000,
 "attr001": "intSIGN1",
 "val001": "500", 
"attr002": "intSIGN2", 
"val002": "70", 
"attr003": "intSIGN3", 
"val003": "100.00",
 "attr004": "intSIGN4",
 "val004": "670",
 "attr005": "strSIGN5", 
"val005": "Traceinvalid"
 },




 { "name": "XYZ", 
"date": 145877400000, 
"attr001": "intVISSE1",
 "val001": "100", 
"attr002": "intVISSE2",
 "val002": "7",
 "attr003": "dt1VISSE3",
 "val003": "39.67",
 "attr004": "intVISSE4",
 "val004": "160",
 "attr005": "strSIGN5", 
"val005": "not found"
 },

 { "name": "XYZ",
 "date": 1461535200000,
 "attr001": "intVISSE1", 
"val001": "50", 
"attr002": "intVISSE2",
 "val002": "70",
 "attr003": "dt1VISSE3",
 "val003": "300.00",
 "attr004": "intVISSE4",
 "val004": "230",
  "attr005": "strSIGN5", 
"val005": "found"
 },

{ "name": "XYZ", 
"date": 1461384717000, 
"attr001": "intVISSE1",
"val001": "300", 
"attr002": "intVISSE2",
 "val002": "10", 
"attr003": "dt1VISSE3", 
"val003": "500.00",
 "attr004": "intVISSE4",
 "val004": "350",
 "attr005": "strSIGN5", 
"val005": "not found" },

{ "name": "ABC", 
"date": 1459051873000, 
"attr001": "intSIGN1",
"val001": "300", 
"attr002": "intVISSE2",
 "val002": "10", 
"attr003": "dt1VISSE3", 
"val003": "500.00",
 "attr004": "intVISSE4",
 "val004": "350",
 "attr005": "strSIGN5", 
"val005": "not found" } ]

Answer 1

As far as I understand

var xScale = d3.scale.ordinal().rangeRoundBands([0, width], .1);

will give you a scale for each unique value within your domain (in this case your dates), which is why d3 wont be able to reduce tick count in your chart. Try using

var xScale = d3.time.scale()

which will help you gain more control in the ticks and the format you are trying to achieve.

You can find more info in how the d3 time scale works here and you can find a question with a really nice explained answer on why certain scales are better suited for your data.

UPDATE:

If you want fewer ticks using an ordinal scale a nice option would be using

var xAxis = d3.svg.axis()
.scale(xScale)
.tickValues(xScale.domain().filter(function(d, i) { return !(i % 2); }))
.orient("bottom");

where the filter function will help decide the tick values of your axis.