How to force d3js to take hours into account when x axis is created?

问题

Fiddle : http://jsfiddle.net/8eba8q33/2/

I have my x axis which is a time scale

var x = d3.time.scale().range([0, width]);

On the x axis i want to be able to have exactly 10 ticks if i have 10 values in my json data. my json Array contains Objects like:

CurrentQuantity: 20
LastUpdated: Thu Jan 15 2015 13:09:30 GMT+0100 (Romance Standard Time)

when i want to create a domain for x axis i trying to do this:

x.domain(d3.extent(data, function(d) {
    return d.LastUpdated; }));

but for some reason code above dont take hours minutes and seconds into account, so if i have multiple objects where LastUpdated are the same, but the difference is in the hours or minutes, scale will just not show it, because plots end up on top of each other.

How do i force xAxis to take hours, minutes and seconds into account?

回答1:

exp1();

function exp1(){
  
  
  var data = [
     {
        "CurrentQuantity": "50",
        "LastUpdated": "/Date(1420793427983)/"
    },
     {
        "CurrentQuantity": "76",
        "LastUpdated": "/Date(1420721731353)/"
    },
    {
        "CurrentQuantity": "20",
        "LastUpdated": "/Date(1420714881920)/"
    },
      {
        "CurrentQuantity": "24",
        "LastUpdated": "/Date(1420713917820)/"
    }//,
     // {
//        "CurrentQuantity": "25",
 //       "LastUpdated": "/Date(1418907098197)/"
 //   }
    
];

var margin = {top: 20, right: 20, bottom: 85, left: 50},
        width = 1500 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
    var formatDate = d3.time.format("%Y-%m-%d %H:%M:%S");

    var x = d3.time.scale().range([0, width]);
    x.tickFormat("%Y-%m-%d %I:%M:%S")
    var y = d3.scale.linear().range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .tickFormat(function(d) { 
            return formatDate(d);
        })
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

    data.forEach(function(d) {
        var date = new Date(parseInt(d.LastUpdated.substr(6)));
        console.log(date)
        d.LastUpdated = date;
    });


    var line = d3.svg.line()
        .x(function(d) {
            return x( d.LastUpdated); 
        })
        .y(function(d) {
            return y(d.CurrentQuantity); 
        });

    var svg = d3.select("#chart1").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 + ")");

 
    x.domain(d3.extent(data, function(d) {
        return d.LastUpdated; 
    }));
    y.domain(d3.extent(data, function(d) {
        return d.CurrentQuantity; 
    }));

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
      .selectAll("text")  
            .style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", ".15em")
            .attr("transform", function(d) {
                return "rotate(-45)" 
            });

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text('@Resource.Amount');

    svg.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("d", line);
  
}








exp2();


function exp2(){
  
  
  var data = [
     {
        "CurrentQuantity": "50",
        "LastUpdated": "/Date(1420793427983)/"
    },
     {
        "CurrentQuantity": "76",
        "LastUpdated": "/Date(1420721731353)/"
    },
    {
        "CurrentQuantity": "20",
        "LastUpdated": "/Date(1420714881920)/"
    },
      {
        "CurrentQuantity": "24",
        "LastUpdated": "/Date(1420713917820)/"
    },
      {
        "CurrentQuantity": "25",
       "LastUpdated": "/Date(1418907098197)/"
    }
    
];

var margin = {top: 20, right: 20, bottom: 85, left: 50},
        width = 1500 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
    var formatDate = d3.time.format("%Y-%m-%d %H:%M:%S");

    var x = d3.time.scale().range([0, width]);
    x.tickFormat("%Y-%m-%d %I:%M:%S")
    var y = d3.scale.linear().range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .tickFormat(function(d) { 
            return formatDate(d);
        })
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

    data.forEach(function(d) {
        var date = new Date(parseInt(d.LastUpdated.substr(6)));
        console.log(date)
        d.LastUpdated = date;
    });


    var line = d3.svg.line()
        .x(function(d) {
            return x( d.LastUpdated); 
        })
        .y(function(d) {
            return y(d.CurrentQuantity); 
        });

    var svg = d3.select("#chart2").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 + ")");

 
    x.domain(d3.extent(data, function(d) {
        return d.LastUpdated; 
    }));
    y.domain(d3.extent(data, function(d) {
        return d.CurrentQuantity; 
    }));

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
      .selectAll("text")  
            .style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", ".15em")
            .attr("transform", function(d) {
                return "rotate(-45)" 
            });

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text('@Resource.Amount');

    svg.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("d", line);
  
}

    chart {
        font: 10px sans-serif;
    }

    .axis path,
    .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }

    .x.axis path {
        /*display: none;*/
    }

    .line {
        stroke: rgb(142, 188, 0);
        stroke-width: 2px;
        stroke-linecap: square;
        stroke-linejoin: round;
        fill-opacity: 1;
        stroke-opacity: 1;
        fill: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<strong>Chart1</strong>
<div id="chart1"></div>
<br>
<strong>Chart2</strong>
<div id="chart2"></div>

After doing some work out, I've came to know that there is nothing wrong, The thing is our assumption. We need to focus on little things.

1)Observe your data Your data contains dates from Date {Thu Dec 18 2014 18:21:38 GMT+0530 (India Standard Time)} to Date {Fri Jan 09 2015 14:20:27 GMT+0530 (India Standard Time)} and we are setting x domain using these dates range, d3 is calculating and arranging the scale to fit in our width, by displaying in our specified format. The format is year-month-date Hours:Minutes:Seconds. See the Chart2 x-axis

And

2) I've removed that December month data, See the x-axis of the Chart1.

Hope you understood.

来源：https://stackoverflow.com/questions/30025179/how-to-force-d3js-to-take-hours-into-account-when-x-axis-is-created