d3 falsche Koordinaten machen (mit Offset)

Question

ich versuche, mit Datum auf x-Achse Diagramm zu schaffen, sondern Punkte machen mit einigem Offset

versetzt ist, hängt von den Markierungen auf den Achsen X

 this.mappedData = window._.map(this.data, (item, key) => { 
      return { 
       date: new Date(key), 
       ...item 
      }; 
     }); 
     var minDate = window._.min(dates); 
     var maxDate = window._.max(dates); 

     this.xScale = d3.scaleTime() 
      .domain([minDate, maxDate]) 
      .range([0, this.width]); 

     var yRange = window._.transform(this.mappedData, function(result, n) { 
      result.push(n.dau); 
      result.push(n.nau); 
     }, []); 

     var minRange = window._.min(yRange); 
     var maxRange = window._.max(yRange); 
     this.yScale = d3.scaleLinear() 
      .domain([minRange, maxRange]) 
      .range([this.height, 0]); 
     var oneDay = 24 * 60 * 60 * 1000; 

     var diffDays = Math.round(Math.abs((minDate.getTime() - maxDate.getTime())/(oneDay))); 
     this.axisX = d3.axisBottom(this.xScale) 
      .ticks(diffDays) 
      .tickFormat(this.formatDate); 

     this.axisY = d3.axisLeft(this.yScale); 


    this.svg.append("path") 
     .attr("class", "dau") 
     .attr("d", this.lineNau(this.mappedData)); 

Issue Demo

Wer weiß, warum das passiert?

Answer 1

1. Add parseDate:

   this.parseDate = d3.timeParse('%Y-%m-%d');

2. vorbereiten Daten:

   this.mappedData = window._.map(this.data, (item, key) => { return { date: self.parseDate(self.formatDate(new Date(key))), ...item }; });

3. Aufruf nette Funktion:

   this.xScale = d3.scaleTime() .domain([minDate, maxDate]).nice(d3.timeDay) // or without arguments .range([0, this.width]);

Bevor:

Nach:

demo