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

Question

First off, let me say that I have tried other solutions to this error posted on Stack Overflow to no avail.

I am making a line graph with D3.js. It all works except for this part:

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");

When I run this, the browser console gives me the error: d3.v3.min.js:1 Error: <path> attribute d: Expected number, "MNaN,261.66666666…". .

I believe the issue is that the X-axis is made up of strings. I don't know how to properly convert these to the right numbers, though. They display in the right order on the axis (I'm using parseInt() on the output of momentJS).

What do I do?

EDIT: Here is the code for the entire chart:

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

I would use d3's time formatting to get those dates into something that d3 can use for a scale, using %-m/%y as the specifier. %-m is a non-padded decimal month and %y is the last 2 digits of the year.