javascript - 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);
解决方案
推荐阅读
- android - 分页库和房间:Recyclerview 滚动时内容未加载
- reactjs - react-slick - 元素类型无效:需要一个字符串
- babeljs - 我如何告诉 Babel 不要关心它不理解的东西?
- sql - 如何在 Oracle 中使用字符串选择表?
- python - 在 Python 中,如何创建别名?我想将“elif”重命名为“elseif”
- ios - 从重叠视图触发 UITapGestureRecognizers
- php - 如何从自定义路由发送来自 Laravel 5.7 的电子邮件验证电子邮件
- java - 什么是正确的正则表达式模式?
- c# - Newtonsoft.Json 在长树中的用法
- pine-script - 如何在较小的时间范围内计算较大时间范围内的指标值