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 - 线图问题

回答

相关问题