javascript - D3 – 折线图问题

Question

D3 新手。尝试创建一个简单的折线图，但无法理解为什么我有这个输出。我猜问题出在 line 常量中的某个地方。

这是我的代码:

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

我究竟做错了什么？ 刻度线看起来没问题，数据也没问题。看起来好像输出是随机的。

Answer 1

这只是一个小错误，很容易做到:%m(小写m)是十进制数月份，但%M(大写m)是分钟。

根据API:

%m - month as a decimal number [01,12]. %M - minute as a decimal number [00,59].

所以，你的常量应该是:

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