D3.js折線圖錯誤：的值無效 <path> 屬性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

這里的工作代碼

希望這可以幫助！