javascript - d3.js，属性d : Expected number, “MNaN,NaNLNaN,NaN”

Question

首先，让我说一下，我已经尝试过针对 Stack Overflow 上发布的此错误的其他解决方案，但无济于事。

我正在使用 D3.js 制作折线图。除此部分外，一切正常:

let lineGen = d3.svg.line()
                        .x(function(d) {
                            //d.month is a string in format MM/YY"
                            return xScale(d.month);
                        })
                        .y(function(d) {
                            console.log('d.feeling: ',d.feeling);
                            //d.feeling is an integer from 1-10
                            return yScale(parseInt(d.feeling));
                        })
                        .interpolate("basis");

当我运行它时，浏览器控制台给我错误:d3.v3.min.js:1 Error: <path> attribute d: Expected number, "MNaN,261.66666666…". .

我认为问题在于 X 轴是由字符串组成的。不过，我不知道如何将这些正确地转换为正确的数字。它们在轴上以正确的顺序显示(我在 momentJS 的输出上使用 parseInt())。

我该怎么办？

编辑:这是整个图表的代码:

function InitChart() {
                    let data = [{
                        "feeling": "5",
                        "month": "01/17"
                    }, {
                        "feeling": "5",
                        "month": "02/17"
                    }, {
                        "feeling": "7",
                        "month": "03/17"
                    }, {
                        "feeling": "2",
                        "month": "04/17"
                    }, {
                        "feeling": "9",
                        "month": "05/17"
                    }, {
                        "feeling": "4",
                        "month": "06/17"
                    }, {
                        "feeling": "9",
                        "month": "07/17"
                    }, {
                        "feeling": "9",
                        "month": "08/17"
                    }, {
                        "feeling": "10",
                        "month": "09/17"
                    }, {
                        "feeling": "1",
                        "month": "10/17"
                    }, {
                        "feeling": "6",
                        "month": "11/17"
                    }, {
                        "feeling": "5",
                        "month": "12/17"
                    }];

                    let today = new Date();
                    let sixMonthsAgo;
                    let yearSixMonthsAgo;

                    if ((parseInt(moment().format('MM')) - 6) > 0) {
                      sixMonthsAgo = parseInt(moment().format('M') - 6);
                      yearSixMonthsAgo = parseInt(moment().format('YYYY'));
                    }
                     else if ((parseInt(moment().format('MM')) - 6) <= 0) {
                      sixMonthsAgo = parseInt(moment().format('M')) + 6;
                      yearSixMonthsAgo = parseInt(moment().format('YYYY')) - 1;
                    };

                    let vis = d3.select("#visualisation"),
                        WIDTH = 1000,
                        HEIGHT = 475,
                        MARGINS = {
                            top: 20,
                            right: 20,
                            bottom: 20,
                            left: 50
                        },
                        xScale = d3.time.scale()
                          .domain([new Date(yearSixMonthsAgo, sixMonthsAgo, 1), new Date()])
                          .range([MARGINS.left, WIDTH - MARGINS.right]),
                        yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([1, 10]),
                        xAxis = d3.svg.axis()
                          .scale(xScale)
                          .orient("bottom")
                          .ticks(d3.time.months)
                          .tickFormat(d3.time.format("%B")),
                        yAxis = d3.svg.axis()
                          .scale(yScale)
                          .orient("left");

                    vis.append("svg:g")
                        .attr("class", "x axis")
                        .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
                        .call(xAxis);
                    vis.append("svg:g")
                        .attr("class", "y axis")
                        .attr("transform", "translate(" + (MARGINS.left) + ",0)")
                        .call(yAxis);


                    let lineGen = d3.svg.line()
                        .x(function(d) {
                            //d.month is a string in format MM/YY"
                            return xScale(d.month);
                        })
                        .y(function(d) {
                            console.log('d.feeling: ',d.feeling);
                            //d.feeling is an integer from 1-10
                            return yScale(parseInt(d.feeling));
                        })
                        .interpolate("basis");
                    vis.append('svg:path')
                        .attr('d', lineGen(data))
                        .attr('stroke', 'green')
                        .attr('stroke-width', 2)
                        .attr('fill', 'none');
                }
                InitChart();

Answer 1

我会使用 d3 的 time formatting使用 %-m/%y 作为说明符，将这些日期转化为 d3 可用于比例的日期。 %-m 是一个非填充的十进制月份，%y 是年份的最后 2 位数字。