另一个D3js <path>的值无效

Question

我已经阅读了有关此问题的所有问题和答案，并且没有找到解决我问题的方法。 我是d3js的新手，并试图创建一个带有X轴日期的折线图，并附加到包含Y轴日期和值的数据对象。

图表创建完美，但是当我试图向其添加一些数据时，为了绘制图表线，我收到了这个错误：

Error: Invalid value for <path> attribute d="MNaN,152.14285714285717LNaN,60.71428571428573"

我的代码是，谢谢你的建议：

var xScale, yScale, xAxis, yAxis;
var monthNameFormat = d3.time.format("%B");
var dayNameFormat   = d3.time.format("%A");
var format          = d3.time.format("%Y-%m-%d");
var chart           = d3.select('#visualisation');
var width           = 550,
    height          = 350,
    padding         = 100;

var margings = { top: 15, right:45, bottom: 15, left: 50 },
    paddings = {top: 50, right: 50, bottom: 50, left: 50, all: 100};


var  img_long_flag = {
        src: 'http://ifeel.inmanage.com/_media/images/icons/high_flag_graph_registration.png',
        width: 41,
        height: 319,
        x: (width/2),
        y: height - 319 - 15
    },

    img_short_flag = {
        src: 'http://ifeel.inmanage.com/_media/images/icons/short_flag_graph_registration.png',
        width: 42,
        height: 163,
        x: (width-120),
        y: height - 163 - 15
     };


var today = new Date(),
    oneWeekAgo = new Date();
    oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);

var mindate = new Date(2016,00,01),
    maxdate = new Date(2016,00,07);


var lineData = [
    {
        'date': format(new Date(2016,00,03)),
        'value': '6'
    },
    {
        'date': format(new Date(2016,00,06)),
        'value': '9'
    }
];




xScale = d3.time.scale()
        .domain([mindate, maxdate])
        .range([margings.left, width - margings.right]);//x scale


yScale = d3.scale.linear()
        .domain([0, 10.5])
        .range([height - margings.top, margings.bottom]);//y scale

xAxis = d3.svg.axis().scale(xScale)
    .orient("bottom").ticks(7)
    .tickFormat(d3.time.format("%Y-%m-%d"));


yAxis = d3.svg.axis()
        .orient("left")
        .scale(yScale);//creating y Axis and moving it left


chart.append("svg:g")
        .attr("stroke", "#BFC1C1")
        .attr("stroke-width", 1)
        .attr('fill', 'none')
        .attr("transform", "translate(" + (margings.left) + ",0)")
        .call(yAxis);//appending with transform Yaxis

chart.append("svg:g")
        .attr("stroke", "#BFC1C1")
        .attr("stroke-width", 1)
        .attr("class", "xaxis")
        .attr('fill', 'none')
        .attr("transform", "translate(0," + (height - margings.bottom) + ")")
        .call(xAxis);//appending with transform x Axis

chart.append("text")
        .attr("y", 15)
        .attr("x",30)
        .attr("class", "graph-title")
        .style("text-anchor", "right")
       // .style("fill", "red")
        .style("font-size", 20)
        .text("VAS");

chart.selectAll(".xaxis text")  // select all the text elements for the xaxis
        .attr("transform", function(d) {
            return "translate(" + this.getBBox().height*-1 + "," + this.getBBox().height + ")rotate(-35)";
        })
        .attr('fill', '#003C4C')
        .attr('stroke', 'none');

var line = d3.svg.line()
        .x(function (d) { return x(d.Date); })
        .y(function (d) { return y(d.NumberOfActive); });

 var lineGen = d3.svg.line().x(function(d) {

    return xScale(d.date);

  }).y(function(d) {
    return yScale(d.value);
  });




 chart.append('svg:path')
      .attr('d', lineGen(lineData))
      .attr('stroke', 'green')
      .attr('stroke-width', 2)
      .attr('fill', 'none');



appendImageToGraph(chart,img_long_flag.src, img_long_flag.width, img_long_flag.height, img_long_flag.x, img_long_flag.y);
appendImageToGraph(chart,img_short_flag.src, img_short_flag.width, img_short_flag.height, img_short_flag.x, img_short_flag.y);

function appendImageToGraph(elem, img, width, height, x, y, callback) {

    return (function() {

        elem.append("svg:image")
            .attr({"xlink:href": img,
                "width": width,
                "height": height,
                "x": x,
                "y":y
            });
        if (callback) {
            chart.attr({
                "transform": callback
            });
        }
    })();
};