D3.js折线图错误:<路径>属性d=“;MNaN、NaNLNaN

D3.js Line Chart Error: Invalid value for <path> attribute d="MNaN,NaNLNaN

本文关键字：NaNLNaN MNaN 属性 路径 折线图 js 错误 D3 lt gt      更新时间：2023-09-26

我一直在学习使用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');

您可以像这样设置数据

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

此处的工作代码

希望这能有所帮助！

相关文章：