D3 - Liniendiagramm Ausgaben

Question

neu zu D3. Ich versuche, ein einfaches Liniendiagramm zu erstellen, kann aber nicht verstehen, warum ich diese Ausgabe habe. Ich vermute, das Problem ist irgendwo in der Linie Konstante.

Hier ist mein Code:

const margin = {top: 20, right: 20, bottom: 30, left: 50}; 
     const width = 960 + margin.left; 
     const height = 500 + margin.left; 
     const parseTime = d3.timeParse("%Y-%M-%d"); 
     const type = d => {; 
      d.date = parseTime(d.date); 
      d.open = +d.open; 
      d.high = +d.high; 
      d.low = +d.low; 
      d.close = +d.close; 
      return d; 
     } 
     const x = d3.scaleTime() 
      .range([0, width]) 

     const y = d3.scaleLinear() 
      .range([height, 0]); 

     const line = d3.line() 
      .x(d => x(d.date)) 
      .y(d => y(d.high)); 
     const svg = d3.select('#graph').append('svg') 
      .attr('width', width) 
      .attr('height', height) 
      .append('g') 
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

     d3.csv('data.csv', type, (error, data) => { 
      x.domain(d3.extent(data.map(d => d.date))); 
      y.domain(d3.extent(data.map(d => d.high))); 


      svg.append("g") 
       .attr("class", "axis axis--x") 
       .attr("transform", "translate(0," + height + ")") 
       .call(d3.axisBottom(x).tickFormat((d, i) => { 
        const date = new Date(d); 
        const year = d.getFullYear(); 
        const month = d.getMonth() + 1; 
        return `${month}-${year}` 
       })) 
       ; 

      svg.append("g") 
       .attr("class", "axis axis--y") 
       .call(d3.axisLeft(y)) 
       .append("text") 
       .attr("class", "axis-title") 
       .attr("transform", "rotate(-90)") 
       .attr("y", 6) 
       .attr("dy", ".71em") 
       .style("text-anchor", "end") 
       .text("High ($)") 
       .attr('fill', '#000'); 


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

CSV

date,open,high,low,close,volume,adjClose 
2016-07-29,31.280001,31.43,31.110001,31.139999,47695300,31.139999 
2016-07-28,31.200001,31.309999,31.08,31.25,30297500,31.25 
[...] 

Was genau mache ich falsch? Die Ticks scheinen in Ordnung und die Daten sind auch in Ordnung. Es sieht so aus, als wäre die Ausgabe irgendwie randomisiert.

Answer 1

Es war nur ein kleiner Fehler, sehr einfach zu tun: %m (Kleinbuchstabe m) ist Monat als Dezimalzahl, aber %M (Großbuchstabe m) ist Minuten.

Nach der API:

% m - Monat als Dezimalzahl [01,12]. % M - Minute als Dezimalzahl [00,59].

Also, Ihr const sein sollte:

const parseTime = d3.timeParse("%Y-%m-%d");