首页 > 解决方案 > D3 Js Burndown图表有错误“属性d:预期数字”,我不知道错误在哪里抛出

问题描述

这个错误是:

未正确渲染
错误:属性 d:预期数字,“M0,NaNL890,NaN”

我正在尝试使用理想和实际数据创建一个 D3js 燃尽图。但无法在图表上显示。我如何遍历“实际”并在y.domain和中显示数据chart.append("path").datum(actual)

var margin = { top: 20, right: 20, bottom: 30, left: 50 },
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
var x = d3.time.scale()
    .range([0, width]);
var y = d3.scale.linear()
    .range([height, 0]);

ideal = [{ date: new Date(getyear, getmonth, getdate), points: noofhours }, { date: new Date(getyear1, getmonth1, getdate1), points: 0 }];

for (var i = 0; i < range.length - 1; i++) {
    var validationItem = new Object();
    validationItem["date"] = new Date(dayyear, daymonth, daydate);
    validationItem["points"] = hours;
    LstArray.push(validationItem);
}

actual = [LstArray];
actual.forEach(function (d1) {
    d1.points = d1.points;
    d1.date = d1.date;
});
var idealLine = d3.svg.line().x(function (d) { return x(d.date); }).y(function (d) { return y(d.points); });
var actualLine = d3.svg.line()
    .x(function (d) {
        var ar = [];
        d.forEach(function (d1) {
            //d.date = d.date;
            ar.push(d1.date);
        });
        console.log('qqqq');
        console.log(ar);
        return ar;
    })
    .y(function (d) {
        var ar = [];
        d.forEach(function (d1) {
            //d.date = d.date;
            ar.push(d1.points);
        });
        console.log('ttt');
        console.log(ar); return ar;
    });
x.domain(d3.extent(ideal, function (d) { return d.date; }));   // y.domain(d3.extent(d1.points, function (d) { return d.points; }));  y.domain(d3.extent(actual, function (d) { return d1.points; }));
var xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(d3.time.format("%b %d"));
var yAxis = d3.svg.axis().scale(y).orient("left");
var chart = d3.select("#divBurnDownChart").append("svg")
    .attr("class", "chart")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
chart.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xAxis);

// Create the y-axis
chart.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Points");
// Paint the ideal line
chart.append("path")
    .datum(ideal)
    .attr("class", "line ideal")
    .attr("d", idealLine);
// Paint the actual line
chart.append("path")
    .datum(actual)
    .attr("class", "line actual")
    .attr("d", actualLine);

标签: javascript

解决方案


推荐阅读