错误:<路径>属性d:预期数字-尝试使用D3构建折线图时 [英] Error: <path> attribute d: expected number - when trying to build a line chart with D3

问题描述

我正在尝试使用D3构建多条折线图.我正在从HTML表中提取数据，然后尝试构建图表.虽然我一直收到错误，但似乎无法弄清楚如何将其转换为数字并且不再收到NaN错误.

I'm trying to build a multiple line chart with D3. I'm pulling the data in from a HTML table and then trying to build the chart. I keep getting an error though and can't seem to figure out how to get it to a number and not get the NaN error anymore.

这是我的代码:

        function plantVolumes() {

        //draw plant volumes table
        plantView = "<h4>Plant Volumes</h4><table id='dataTable' class='plantVolumeTable'><thead id='plantTableHead'><tr><th>Month Start Date</th><th>Volume Type</th><th>Volume</th><th>Unit</th><th class='hidden'>Volume Src</th></tr></thead><tbody>";
        for(i=0;i<plantData1.length;i++) {

            if(plantData1["MergeKey_lvl00"][i] == mergeKey) {
                //get volume type
                for(var j=0;j<plantData2.length;j++) {
                    if(plantData2["VolumeTypeId"][j] == plantData1["VolumeTypeId"][i]) {
                        var volumeType = plantData2["VolumeType"][j];
                        var volumeUnit = plantData2["Unit"][j];
                    }
                }
                //draw rows 
                plantView += "<tr><td>" + plantData1["MonthStartDate"][i] + "</td><td>" + volumeType + "</td><td>" + plantData1["Volume"][i] + "</td><td>" + volumeUnit + "</td><td class='hidden'>" + plantData1["Volume_src"][i] + "</td></tr>";  
            }
        }
        plantView += "</tbody></table>";

        $("#plantVolumesTableDiv").html(plantView);
        document.getElementById("plantViews").style.display = "block";

        initializeDataTable();
        //end draw plant volumes table

        //DRAW LINE CHART                   
        //set dimensions of canvas
        var margin = {top:30, right:20, bottom:30, left:50},
            width = 600 - margin.left - margin.right,
            height = 270 - margin.top - margin.bottom;

        //parse the date
        var parseDate = d3.time.format("%Y %b %d").parse;

        //set the ranges
        var x = d3.time.scale().range([0, width]);
        var y = d3.scale.linear().range([height, 0]);

        //define the axes
        var xAxis = d3.svg.axis().scale(x)
            .orient("bottom").ticks(12);
        var yAxis = d3.svg.axis().scale(y)
            .orient("left").ticks(5);

        //define the line
        var volumeLine = d3.svg.line()
            //.x( (d) => x(d.MonthStartDate) )
            .x(function(d) { return x(d.MonthStartDate); })
            .y(function(d) { return y(d.Volume); });

        //add svg to canvas
        var svg = d3.select("#volumeChart")
            //.data(data)
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
            .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        //get volume table data
        var data = $(".plantVolumeTable tbody").children().map(function() {
            var children = $(this).children();

            return {
                MonthStartDate: children.eq(0).text(),
                VolumeType: children.eq(1).text(),
                Volume: children.eq(2).text()
            };
        }).get();

        data.forEach(function(d) {
            d.MonthStartDate = d.MonthStartDate;
            //d.VolumeType = d.VolumeType;
            d.Volume = +d.Volume;
        });

        //console.log(data);

        //scale the range of data
        x.domain(d3.extent(data, function(d) { return d.MonthStartDate; }));
        y.domain([0, d3.max(data, function(d) { return d.Volume; })]);

        //nest data
        var dataNest = d3.nest()
            .key(function(d) { return d.VolumeType; })
            .entries(data);
        console.log(dataNest);
        //loop through volume types / key
        dataNest.forEach(function(d) {

            svg.append("path")
                .attr("class", "line")
                .attr("d", volumeLine(d.values));
        });

        //add the x axis
        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);
        //add the y axis
        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis);
    }

对我在做错或遗失的事情有什么想法吗?

Any thoughts on what I'm doing wrong or missing?

推荐答案

我对您的代码做了一些修改.您需要在行和域部分这两个地方解析日期.另外，您需要将parseDate修改为表格格式正确的格式.

I modified your code a little bit. You needed to parse the date in both places, the line and the domain part. Also, you needed to fix your parseDate to be the correct format the way the table.

这是我修改的代码:

        function plantVolumes() {

        //draw plant volumes table
        plantView = "<h4>Plant Volumes</h4><table id='dataTable' class='plantVolumeTable'><thead id='plantTableHead'><tr><th>Month Start Date</th><th>Volume Type</th><th>Volume</th><th>Unit</th><th class='hidden'>Volume Src</th></tr></thead><tbody>";
        for(i=0;i<plantData1.length;i++) {

            if(plantData1["MergeKey_lvl00"][i] == mergeKey) {
                //get volume type
                for(var j=0;j<plantData2.length;j++) {
                    if(plantData2["VolumeTypeId"][j] == plantData1["VolumeTypeId"][i]) {
                        var volumeType = plantData2["VolumeType"][j];
                        var volumeUnit = plantData2["Unit"][j];
                    }
                }
                //draw rows 
                plantView += "<tr><td>" + plantData1["MonthStartDate"][i] + "</td><td>" + volumeType + "</td><td>" + plantData1["Volume"][i] + "</td><td>" + volumeUnit + "</td><td class='hidden'>" + plantData1["Volume_src"][i] + "</td></tr>";  
            }
        }
        plantView += "</tbody></table>";

        $("#plantVolumesTableDiv").html(plantView);
        document.getElementById("plantViews").style.display = "block";

        initializeDataTable();
        //end draw plant volumes table

        //DRAW LINE CHART                   
        //set dimensions of canvas
        var margin = {top:30, right:20, bottom:30, left:50},
            width = 600 - margin.left - margin.right,
            height = 270 - margin.top - margin.bottom;

        //parse the date
        var parseDate = d3.time.format("%Y-%m-%d").parse;

        //set the ranges
        var x = d3.time.scale().range([0, width]);
        var y = d3.scale.linear().range([height, 0]);

        //define the axes
        var xAxis = d3.svg.axis().scale(x)
            .orient("bottom").ticks(12);
        var yAxis = d3.svg.axis().scale(y)
            .orient("left").ticks(5);

        //define the line
        var volumeLine = d3.svg.line()
            .x(function(d) { return x(parseDate(d.MonthStartDate)); })
            .y(function(d) { return y(d.Volume); });

        //add svg to canvas
        var svg = d3.select("#volumeChart")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
            .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        //get volume table data
        var data = $(".plantVolumeTable tbody").children().map(function() {
            var children = $(this).children();

            return {
                MonthStartDate: children.eq(0).text(),
                Volume: children.eq(2).text(),
                VolumeType: children.eq(1).text()
            };
        }).get();

        data.forEach(function(d) {
            d.MonthStartDate = d.MonthStartDate;
            d.VolumeType = d.VolumeType;
            d.Volume = +d.Volume;
        });

        //scale the domain of data
        x.domain(d3.extent(data, function(d) { return parseDate(d.MonthStartDate); }));
        y.domain([0, d3.max(data, function(d) { return d.Volume; })]);

        //nest data
        var dataNest = d3.nest()
            .key(function(d) { return d.VolumeType; })
            .entries(data);
        //loop through volume types / key
        dataNest.forEach(function(d) {

            svg.append("path")
                .attr("class", "line " + function(d) {return d.VolumeType;})
                .attr("d", volumeLine(d.values));
        });

        //add the x axis
        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);
        //add the y axis
        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis);   

    }

这篇关于错误:<路径>属性d:预期数字-尝试使用D3构建折线图时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！