Zeitskala in d3js

Question

var data; 
     data = [ 
       {"date":"1-May-12 11:00 AM","TPH":2}, 
       {"date":"1-May-12 12:00 PM","TPH":3}, 
       {"date":"1-May-12 1:00 PM","TPH":2}, 
       {"date":"1-May-12 2:00 PM","TPH":4}, 
       {"date":"1-May-12 3:00 PM","TPH":2}, 
       {"date":"1-May-12 4:00 PM","TPH":3} 
      ]; 
     // var passedheight = this.getHeight(); 
     //var containerWidth = jQuery.sap.byId(this.oParent.sId).width() || 800; // gets super parent width 
     var containerWidth = $("#"+this.getId()).parent().width(); // gets immediate parent width 
     var containerheight = $("#"+this.getId()).parent().height(); 
     var margin = {top: 15, right: 30, bottom: 20, left: 30}, 
     width = containerWidth- margin.left - margin.right, 
     height = containerheight - margin.top - margin.bottom; 
     var parseDate = d3.time.format("%d-%b-%y %H:%M %p").parse; 
     var maxDate = parseDate(d3.max(data, function(d) { return d.date; })); 
     var minDate = d3.time.hour.offset(parseDate(d3.min(data, function(d) { return d.date; })),-2); 

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

     var y = d3.scale.linear() 
      .range([height, 0]); 

     var color = d3.scale.category10(); 

     var xAxis = d3.svg.axis() 
      .scale(x) 
      .orient("bottom").ticks(4); 

     var yAxis = d3.svg.axis() 
      .scale(y) 
      .orient("left").ticks(4).tickSize(-width, 0, 0); 

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

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

      color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; })); 

      data.forEach(function(d) { 
      d.date = parseDate(d.date); 
      }); 

      var wsfs = color.domain().map(function(name) { 
      return { 
       name: name, 
       values: data.map(function(d) { 
       return {date: d.date, tonneValue: +d[name]}; 
       }) 
      }; 
      }); 

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

      y.domain([ 
      //d3.min(wsfs, function(c) { return d3.min(c.values, function(v) { return v.tonneValue; }); }), 
      0, 
      d3.max(wsfs, function(c) { return d3.max(c.values, function(v) { return v.tonneValue; }); }) 
      ]); 

      svg.append("g") 
       .attr("class", "x axis") 
       .attr("transform", "translate(0," + height + ")") 
       .call(xAxis); 

      svg.append("g") 
       .attr("class", "y axis") 
       .call(yAxis); 

      var wsf = svg.selectAll(".wsf") 
       .data(wsfs) 
       .enter().append("g") 
       .attr("class", "wsf"); 

      wsf.append("path") 
       .attr("class", "line") 
       .attr("d", function(d) { return line(d.values); }) 
       .style("stroke", function(d) { return color(d.name); }); 

      var legendNames = d3.keys(data[0]).filter(function(key) { return key !== "date" }); 

      data.forEach(function(d) { 
      d.ages = legendNames.map(function(name) { return {name: name, value: +d[name]}; }); 
      }); 
     var legend = svg.selectAll(".legend") 
       .data(legendNames.slice()) 
      .enter().append("g") 
       .attr("class", "legend") 
       .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); 

      legend.append("rect") 
       .attr("x", width - 18) 
       .attr("width", 18) 
       .attr("height", 4) 
       .style("fill", function(d) {return color(d); }); 

      legend.append("text") 
       .attr("x", width - 24) 
       .attr("y", 6) 
       .attr("dy", ".35em") 
       .style("text-anchor", "end") 
       .text(function(d) { return d; }); 

Gemäß obigem Code bekomme ich die Daten ähnlich das Bild unten (Daten nicht exakt) einstellen:

Aber in meinem Code habe ich versucht, zusätzliche Reichweite zu erreichen, wo die Die Strecke sollte um 10.00 Uhr beginnen und um 16.00 Uhr enden, dh die Linie sollte bei x: 11 Uhr und y: 2 beginnen und zwischen 10.00 Uhr und 11.00 Uhr sollte etwas Platz sein. In meinem Fall beginnt die Linie jedoch erst ab 2 . Und die Ticks sind auch zufällig.

Hinzugefügt: FIDDLE

Answer 1

Wenn Sie diese Zeile kommentieren werden (nr 63 in Ihrer Geige):

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

Ihr Code wird wie erwartet.

Sie haben es richtig gemacht, als Sie einen Offset von minDate aus Ihren Daten genommen haben, aber später haben Sie Ihren x.domain mit exaktem min und max aus Ihren Daten überschrieben.