Question

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

我究竟做错了什么？滴答似乎没问题，数据也可以。看起来好像输出是以某种方式随机化的。

Answer 1

这只是一个小错误，很容易做到：%m（小写字母m）是十进制数字的月份，但是%M（大写字母m）是分钟。

根据API：

％m - 月份为十进制数[01,12]。％M - 十进制数分钟[00,59]。

所以，你的const应该是：

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

D3 - 线图问题

1 个答案: