D3 - 線圖問題 - 優文庫

新的D3。試圖創建一個簡單的折線圖，但不明白爲什麼我有這個輸出。我猜這個問題是在行不變的地方。D3 - 線圖問題

這裏是我的代碼：

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 
[...]

我究竟在做什麼錯？蜱似乎確定，數據也可以。看起來好像輸出是隨機的。

來源

2016-08-01 Roland Jegorov

月爲十進制數爲'％M'，與小寫字母「M」，大寫字母「M」代表分鐘。改變你的const：'const parseTime = d3.timeParse（「％Y-％m-％d」）;'。 –

哦，男人，它的作品...我想我應該早點睡覺。謝謝，現在感覺很蠢。：D –

@GerardoFurtado請發表回答，以便我可以批准它。 :) –

這只是一個小錯誤，很容易做到：%m（小寫字母m）是十進制數字，但%M（大寫字母m）是分鐘。

根據API：

％間 - 每月的十進制數[01,12]。％M - 十進制數[00,59]。

所以，你的常量應該是：

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

來源

2016-08-02 08:02:46

謝謝，赫拉爾多！：）祝你今天愉快！ –

D3 - 線圖問題

回答

相關問題