2016-08-01 7 views
1

が発行されます。単純な折れ線グラフを作成しようとしていますが、なぜこの出力があるのか​​理解できません。私は問題があると推測しています。の行にあるの定数です。D3 - ラインチャートでD3に新しい

enter image description here

ここに私のコードです:

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

まさに私が間違っているのか? ダニはOKと思われ、データもOKです。出力が何らかの形でランダム化されているかのように見えます。

+1

月進数は小文字の "M" で、 '%のm​​'あるとして、大文字の "m" は分です。あなたのconstを変更してください: 'const parseTime = d3.timeParse("%Y-%m-%d ");'。 –

+1

ああ、それは動作します...私は早く寝なければならないと思います。ありがとう、今、愚かな感じ。 :D –

+1

@GerardoFurtado私はそれを承認できるように答えを投稿してください。 :) –

答えて

1

%m(小文字のm)は10進数で月ですが、%M(大文字のm)は分です。 APIによる

%のM - 月進数[01,12]など。小数[00,59]として %M - 分。

だから、あなたのconstが次のようになります。

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

ありがとう、ジェラルド! :) 良い一日を! –

関連する問題