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

希望这有帮助！

D3.js折线图错误：<path>属性的值无效d =“MNaN，NaNLNaN

1 个答案: