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＆＃39; s time formatting将这些日期转换为d3可用于比例的内容，使用%-m/%y作为说明符。 %-m是非填充的十进制月，%y是一年中的最后两位数。

d3.js，属性d：预期数，“MNaN，NaNLNaN，NaN”

1 个答案: