javascript - D3.js 折线图错误 : Invalid value for attribute d="MNaN, NaNLNaN

Question

我一直在按照教程使用 D3.js 创建折线图。

我按照教程进行操作，但收到错误错误: <path> 的值无效属性 d="MNaN,NaNLNaN.......

我不知道为什么会发生这种情况!

    var formCumActual1 = parseFloat($('input[name="cumActual1"]').val());
    var formCumActual2 = parseFloat($('input[name="cumActual2"]').val());
    var formCumActual3 = parseFloat($('input[name="cumActual3"]').val());
    etc...


//Data for Line Chart

    var cumActualObject = [

        {
            "xNum": 1,
            "yNum": formCumActual1
        },
        {
            "xNum": 2,
            "yNum": formCumActual2
        },
        {
            "xNum": 3,
            "yNum": formCumActual3
        },
        etc...


   //Line Charts

var lineVis = d3.select("#lineChart"),
    WIDTH = 1000,
    HEIGHT = 500,
    MARGINS = {
        top: 20,
        right: 20,
        bottom: 20,
        left: 50
    },

    xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(cumActualObject, function(d){
        return d.x
    }), d3.max(cumActualObject, function(d){
        return d.x
    })]),

    yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(cumActualObject, function(d){
        return d.y
    }), d3.max(cumActualObject, function(d){
        return d.y
    })]),

    xAxis = d3.svg.axis().scale(xScale),

    yAxis = d3.svg.axis().scale(yScale).orient("left");


lineVis.append("svg:g").attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")").call(xAxis);

lineVis.append("svg:g").attr("transform", "translate(" +(MARGINS.left) + ",0)").call(yAxis);



var lineGen = d3.svg.line()
.x(function(d){
    return xScale(d.xNum);
})
.y(function(d){
    return yScale(d.yNum);
});


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

Answer 1

你这样设置数据

var cumActualObject = [

        {
            "xNum": 1,
            "yNum": formCumActual1
        },
        {
            "xNum": 2,
            "yNum": formCumActual2
        },
        {
            "xNum": 3,
            "yNum": formCumActual3
        }]

并找到这样的最大最小值

   xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(cumActualObject, function(d){
        return d.x
    }), d3.max(cumActualObject, function(d){
        return d.x;//this is incorrect there is no x but it should be xNum
    })]),

    yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(cumActualObject, function(d){
        return d.y//this is incorrect there is no x but it should be yNum
    }), d3.max(cumActualObject, function(d){
        return d.y//this is incorrect there is no x but it should be yNum
    })]),

正确的代码应该是:

 xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(cumActualObject, function(d){
        return d.xNum
    }), d3.max(cumActualObject, function(d){
        return d.xNum
    })]),

    yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(cumActualObject, function(d){
        return d.yNum
    }), d3.max(cumActualObject, function(d){
        return d.yNum
    })]),

在计算时，您必须清除旧图表，否则两个图表将相互重叠:

lineVis.selectAll("g").remove();//remove all g 
lineVis.selectAll("path").remove();//rmove all path

工作代码here

希望这有帮助!