Adding 2nd chart data into NVD3 chart causes "Error: Invalid value for <path>"
Adding 2nd chart data into NVD3 chart causes "Error: Invalid value for <path>"
我这里有一张图表 line and area graph here。
然后我有一个chart here with just the line rendered，和一个添加面积图数据的按钮。
在第二个 plnkr 示例中，当您单击 添加第二个图表 按钮时，我将 data2 添加到数据中，然后再次调用 drawChart。但是图表没有绘制，我看到大量 Invalid value for <path> 错误。
在控制台中，我看到我的数据数组获取了 2 个对象，所以我不确定哪里出错了。想法？
var data = [{
"key": "Price",
"type": "line",
"yAxis": 2,
"values": [
[1443621600000, 71.89],
[1443619800000, 75.51],
[1443618000000, 12.49],
[1443616200000, 20.72],
[1443612600000, 70.39],
[1443610800000, 59.77],
]
}];
var data2 = [{
"key": "Quantity1",
"type": "area",
"yAxis": 1,
"values": [
[1136005200000, 1],
[1138683600000, 5],
[1141102800000, 10],
[1143781200000, 0],
[1146369600000, 1],
[1149048000000, 0],
]
}];
// Draw initial chart:
drawChart(data);
function drawChart(data, option) {
// Clear out old chart:
// d3.selectAll("svg > *").remove();
// data = [];
// chart = {};
console.log('data',data);
data = data.map(function(series) {
series.values = series.values.map(function(d) {
return {
x: d[0],
y: d[1]
}
});
return series;
});
console.log('data after map function:',data);
if (option) {
console.log('2nd data object added:');
data2 = data2.map(function(series) {
series.values = series.values.map(function(d) {
return {
x: d[0],
y: d[1]
}
});
return series;
});
data.push(data2[0]);
console.log('data',data);
}
nv.addGraph(function() {
chart = nv.models.multiChart()
.margin({
top: 20,
right: 40,
bottom: 50,
left: 40
})
.yDomain1([0, 10])
.yDomain2([0, 100]) // hard-coded :<
.interpolate("linear") // don't smooth out the lines
.color(d3.scale.category10().range());
chart.xAxis.tickFormat(function(d) {
return d3.time.format('%I:%M')(new Date(d));
});
chart.yAxis1.tickFormat(d3.format(',f'));
chart.yAxis2.tickFormat(function(d) {
return '$' + d3.format(',f')(d)
});
d3.select('svg#chart')
.datum(data)
.transition().duration(500).call(chart);
chart.tooltip.hidden(true);
chart.update();
d3.selection.prototype.moveToFront = function() {
return this.each(function() {
this.parentNode.appendChild(this);
});
};
d3.selection.prototype.moveToBack = function() {
return this.each(function() {
var firstChild = this.parentNode.firstChild;
if (firstChild) {
this.parentNode.insertBefore(this, firstChild);
}
});
};
// d3.select('svg#chart .lines1wrap').moveToFront();
d3.select('svg#chart .lines2wrap').moveToFront();
d3.select('svg#chart .nv-areaWrap').moveToBack();
d3.select('.lines2Wrap').node().parentNode.insertBefore(d3.select('.stack1Wrap').node(), d3.select('.lines2Wrap').node());
// Add top padding to xAxis timeline:
d3.selectAll('.nv-x.nv-axis > .nv-wrap.nv-axis > g > g.tick > text').each(function(d,i) {
d3.select(this).attr('dy', '1.5em');
});
d3.selectAll('.nv-x.nv-axis > .nv-wrap.nv-axis > .nv-axisMaxMin > text').each(function(d,i) {
d3.select(this).attr('dy', '1.5em');
});
nv.utils.windowResize(chart.update);
return chart;
});
}
function toggle2nd() {
vm.multiChart = !vm.multiChart;
if (vm.multiChart) {
console.log('clicked add 2nd button:',data)
drawChart(data, true);
}
}
Update，我按照 Molda 将 data.map 函数移到了 drawChart 函数中。但是，当我单击“添加图表”按钮以使用 2 个图形重新绘制图表时，出于某种原因，数据值数组的 x 和 y 值都变为 undefined。所以现在点击按钮后，橙色区域图被绘制出来，但我失去了折线图。仍然出现 Invalid value 错误，但可能是由于未定义的 x 和 y。
http://plnkr.co/edit/2pFDDITuPc7XaL0eR4AA?p=preview
在第一次调用 drawChart 之前，您正在将 data.values 映射到 x,y。在再次调用 drawChart 之前执行相同的操作。
更新
更改此
data = data.map(function(series) {
series.values = series.values.map(function(d) {
return { x: d[0], y: d[1] }
});
return series;
});
function drawChart(res) {
至此
function drawChart(res) {
res = res.map(function(series) {
series.values = series.values.map(function(d) {
return { x: d[0], y: d[1] }
});
return series;
});
另一个更新
工作代码，查看添加的行
plnkrhere
var data1 = [{
"key": "Pricexcv",
"type": "line",
"yAxis": 2,
"values": [
[1443621600000, 71.89],
[1443619800000, 75.51],
[1443618000000, 12.49],
[1443616200000, 20.72],
[1443612600000, 70.39],
[1443610800000, 59.77]
]
}];
var data2 = {
"key": "Quantity1",
"type": "area",
"yAxis": 1,
"values": [
[1136005200000, 1],
[1138683600000, 5],
[1141102800000, 10],
[1143781200000, 0],
[1146369600000, 1],
[1149048000000, 0]
]
};
drawChart(data1);
function drawChart(res, option) {
// Clear out old chart:
// d3.selectAll("svg > *").remove();
// data = [];
// chart = {};
console.log('data',res);
nv.addGraph(function() {
chart = nv.models.multiChart()
.margin({
top: 20,
right: 40,
bottom: 50,
left: 40
})
/// these two lines added----------------------
.x(function(d) { return d[0] })
.y(function(d) { return d[1] })
/// these two lines added----------------------
.yDomain1([0, 10])
.yDomain2([0, 100]) // hard-coded :<
.interpolate("linear") // don't smooth out the lines
.color(d3.scale.category10().range());
chart.xAxis.tickFormat(function(d) {
return d3.time.format('%I:%M')(new Date(d));
});
chart.yAxis1.tickFormat(d3.format(',f'));
chart.yAxis2.tickFormat(function(d) {
return '$' + d3.format(',f')(d)
});
d3.select('svg#chart')
.datum(res)
.transition().duration(500).call(chart);
chart.tooltip.hidden(true);
chart.update();
d3.selection.prototype.moveToFront = function() {
return this.each(function() {
this.parentNode.appendChild(this);
});
};
d3.selection.prototype.moveToBack = function() {
return this.each(function() {
var firstChild = this.parentNode.firstChild;
if (firstChild) {
this.parentNode.insertBefore(this, firstChild);
}
});
};
// d3.select('svg#chart .lines1wrap').moveToFront();
d3.select('svg#chart .lines2wrap').moveToFront();
d3.select('svg#chart .nv-areaWrap').moveToBack();
d3.select('.lines2Wrap').node().parentNode.insertBefore(d3.select('.stack1Wrap').node(), d3.select('.lines2Wrap').node());
// Add top padding to xAxis timeline:
d3.selectAll('.nv-x.nv-axis > .nv-wrap.nv-axis > g > g.tick > text').each(function(d,i) {
d3.select(this).attr('dy', '1.5em');
});
d3.selectAll('.nv-x.nv-axis > .nv-wrap.nv-axis > .nv-axisMaxMin > text').each(function(d,i) {
d3.select(this).attr('dy', '1.5em');
});
nv.utils.windowResize(chart.update);
return chart;
});
}
$scope.toggle2nd = function() {
data1.push(data2);
drawChart(data1);
}
我删除了对地图功能的需求（不同的错误）
然后为了将第二个图表添加到数据数组中，我更新了 toggle2nd() 函数，如下所示：
function toggle2nd() {
vm.multiChart = !vm.multiChart;
if (vm.multiChart) {
data.push(data2[0]);
drawChart(data);
}
}
完整代码：
var data = [{
"key": "Price",
"type": "line",
"yAxis": 2,
"values": [
{ x: 1443621600000, y: 71.89 },
{ x: 1443619800000, y: 75.51 },
{ x: 1443618000000, y: 12.49 },
{ x: 1443616200000, y: 20.72 },
{ x: 1443612600000, y: 70.39 },
{ x: 1443610800000, y: 59.77 }
]
}];
var data2 = [{
"key": "Quantity1",
"type": "area",
"yAxis": 1,
"values": [
{ x: 1136005200000, y: 1 },
{ x: 1138683600000, y: 5 },
{ x: 1141102800000, y: 10 },
{ x: 1143781200000, y: 0 },
{ x: 1146369600000, y: 1 },
{ x: 1149048000000, y: 0 }
]
}];
// Draw initial chart:
drawChart(data);
function drawChart(res) {
console.log('res',res);
nv.addGraph(function() {
chart = nv.models.multiChart()
.margin({
top: 20,
right: 40,
bottom: 50,
left: 40
})
.yDomain1([0, 10])
.yDomain2([0, 100]) // hard-coded :<
.interpolate("linear") // don't smooth out the lines
.color(d3.scale.category10().range());
chart.xAxis.tickFormat(function(d) {
return d3.time.format('%I:%M')(new Date(d));
});
chart.yAxis1.tickFormat(d3.format(',f'));
chart.yAxis2.tickFormat(function(d) {
return '$' + d3.format(',f')(d)
});
d3.select('svg#chart')
.datum(res)
.transition().duration(500).call(chart);
chart.tooltip.hidden(true);
chart.update();
d3.selection.prototype.moveToFront = function() {
return this.each(function() {
this.parentNode.appendChild(this);
});
};
d3.selection.prototype.moveToBack = function() {
return this.each(function() {
var firstChild = this.parentNode.firstChild;
if (firstChild) {
this.parentNode.insertBefore(this, firstChild);
}
});
};
// d3.select('svg#chart .lines1wrap').moveToFront();
d3.select('svg#chart .lines2wrap').moveToFront();
d3.select('svg#chart .nv-areaWrap').moveToBack();
d3.select('.lines2Wrap').node().parentNode.insertBefore(d3.select('.stack1Wrap').node(), d3.select('.lines2Wrap').node());
// Add top padding to xAxis timeline:
d3.selectAll('.nv-x.nv-axis > .nv-wrap.nv-axis > g > g.tick > text').each(function(d,i) {
d3.select(this).attr('dy', '1.5em');
});
d3.selectAll('.nv-x.nv-axis > .nv-wrap.nv-axis > .nv-axisMaxMin > text').each(function(d,i) {
d3.select(this).attr('dy', '1.5em');
});
nv.utils.windowResize(chart.update);
return chart;
});
}
function toggle2nd() {
vm.multiChart = !vm.multiChart;
if (vm.multiChart) {
data.push(data2[0]);
drawChart(data);
}
}
我这里有一张图表 line and area graph here。
然后我有一个chart here with just the line rendered，和一个添加面积图数据的按钮。
在第二个 plnkr 示例中，当您单击 添加第二个图表 按钮时，我将 data2 添加到数据中，然后再次调用 drawChart。但是图表没有绘制，我看到大量 Invalid value for <path> 错误。
在控制台中，我看到我的数据数组获取了 2 个对象，所以我不确定哪里出错了。想法？
var data = [{
"key": "Price",
"type": "line",
"yAxis": 2,
"values": [
[1443621600000, 71.89],
[1443619800000, 75.51],
[1443618000000, 12.49],
[1443616200000, 20.72],
[1443612600000, 70.39],
[1443610800000, 59.77],
]
}];
var data2 = [{
"key": "Quantity1",
"type": "area",
"yAxis": 1,
"values": [
[1136005200000, 1],
[1138683600000, 5],
[1141102800000, 10],
[1143781200000, 0],
[1146369600000, 1],
[1149048000000, 0],
]
}];
// Draw initial chart:
drawChart(data);
function drawChart(data, option) {
// Clear out old chart:
// d3.selectAll("svg > *").remove();
// data = [];
// chart = {};
console.log('data',data);
data = data.map(function(series) {
series.values = series.values.map(function(d) {
return {
x: d[0],
y: d[1]
}
});
return series;
});
console.log('data after map function:',data);
if (option) {
console.log('2nd data object added:');
data2 = data2.map(function(series) {
series.values = series.values.map(function(d) {
return {
x: d[0],
y: d[1]
}
});
return series;
});
data.push(data2[0]);
console.log('data',data);
}
nv.addGraph(function() {
chart = nv.models.multiChart()
.margin({
top: 20,
right: 40,
bottom: 50,
left: 40
})
.yDomain1([0, 10])
.yDomain2([0, 100]) // hard-coded :<
.interpolate("linear") // don't smooth out the lines
.color(d3.scale.category10().range());
chart.xAxis.tickFormat(function(d) {
return d3.time.format('%I:%M')(new Date(d));
});
chart.yAxis1.tickFormat(d3.format(',f'));
chart.yAxis2.tickFormat(function(d) {
return '$' + d3.format(',f')(d)
});
d3.select('svg#chart')
.datum(data)
.transition().duration(500).call(chart);
chart.tooltip.hidden(true);
chart.update();
d3.selection.prototype.moveToFront = function() {
return this.each(function() {
this.parentNode.appendChild(this);
});
};
d3.selection.prototype.moveToBack = function() {
return this.each(function() {
var firstChild = this.parentNode.firstChild;
if (firstChild) {
this.parentNode.insertBefore(this, firstChild);
}
});
};
// d3.select('svg#chart .lines1wrap').moveToFront();
d3.select('svg#chart .lines2wrap').moveToFront();
d3.select('svg#chart .nv-areaWrap').moveToBack();
d3.select('.lines2Wrap').node().parentNode.insertBefore(d3.select('.stack1Wrap').node(), d3.select('.lines2Wrap').node());
// Add top padding to xAxis timeline:
d3.selectAll('.nv-x.nv-axis > .nv-wrap.nv-axis > g > g.tick > text').each(function(d,i) {
d3.select(this).attr('dy', '1.5em');
});
d3.selectAll('.nv-x.nv-axis > .nv-wrap.nv-axis > .nv-axisMaxMin > text').each(function(d,i) {
d3.select(this).attr('dy', '1.5em');
});
nv.utils.windowResize(chart.update);
return chart;
});
}
function toggle2nd() {
vm.multiChart = !vm.multiChart;
if (vm.multiChart) {
console.log('clicked add 2nd button:',data)
drawChart(data, true);
}
}
Update，我按照 Molda 将 data.map 函数移到了 drawChart 函数中。但是，当我单击“添加图表”按钮以使用 2 个图形重新绘制图表时，出于某种原因，数据值数组的 x 和 y 值都变为 undefined。所以现在点击按钮后，橙色区域图被绘制出来，但我失去了折线图。仍然出现 Invalid value 错误，但可能是由于未定义的 x 和 y。
http://plnkr.co/edit/2pFDDITuPc7XaL0eR4AA?p=preview
在第一次调用 drawChart 之前，您正在将 data.values 映射到 x,y。在再次调用 drawChart 之前执行相同的操作。
更新 更改此
data = data.map(function(series) {
series.values = series.values.map(function(d) {
return { x: d[0], y: d[1] }
});
return series;
});
function drawChart(res) {
至此
function drawChart(res) {
res = res.map(function(series) {
series.values = series.values.map(function(d) {
return { x: d[0], y: d[1] }
});
return series;
});
另一个更新
工作代码，查看添加的行
plnkrhere
var data1 = [{
"key": "Pricexcv",
"type": "line",
"yAxis": 2,
"values": [
[1443621600000, 71.89],
[1443619800000, 75.51],
[1443618000000, 12.49],
[1443616200000, 20.72],
[1443612600000, 70.39],
[1443610800000, 59.77]
]
}];
var data2 = {
"key": "Quantity1",
"type": "area",
"yAxis": 1,
"values": [
[1136005200000, 1],
[1138683600000, 5],
[1141102800000, 10],
[1143781200000, 0],
[1146369600000, 1],
[1149048000000, 0]
]
};
drawChart(data1);
function drawChart(res, option) {
// Clear out old chart:
// d3.selectAll("svg > *").remove();
// data = [];
// chart = {};
console.log('data',res);
nv.addGraph(function() {
chart = nv.models.multiChart()
.margin({
top: 20,
right: 40,
bottom: 50,
left: 40
})
/// these two lines added----------------------
.x(function(d) { return d[0] })
.y(function(d) { return d[1] })
/// these two lines added----------------------
.yDomain1([0, 10])
.yDomain2([0, 100]) // hard-coded :<
.interpolate("linear") // don't smooth out the lines
.color(d3.scale.category10().range());
chart.xAxis.tickFormat(function(d) {
return d3.time.format('%I:%M')(new Date(d));
});
chart.yAxis1.tickFormat(d3.format(',f'));
chart.yAxis2.tickFormat(function(d) {
return '$' + d3.format(',f')(d)
});
d3.select('svg#chart')
.datum(res)
.transition().duration(500).call(chart);
chart.tooltip.hidden(true);
chart.update();
d3.selection.prototype.moveToFront = function() {
return this.each(function() {
this.parentNode.appendChild(this);
});
};
d3.selection.prototype.moveToBack = function() {
return this.each(function() {
var firstChild = this.parentNode.firstChild;
if (firstChild) {
this.parentNode.insertBefore(this, firstChild);
}
});
};
// d3.select('svg#chart .lines1wrap').moveToFront();
d3.select('svg#chart .lines2wrap').moveToFront();
d3.select('svg#chart .nv-areaWrap').moveToBack();
d3.select('.lines2Wrap').node().parentNode.insertBefore(d3.select('.stack1Wrap').node(), d3.select('.lines2Wrap').node());
// Add top padding to xAxis timeline:
d3.selectAll('.nv-x.nv-axis > .nv-wrap.nv-axis > g > g.tick > text').each(function(d,i) {
d3.select(this).attr('dy', '1.5em');
});
d3.selectAll('.nv-x.nv-axis > .nv-wrap.nv-axis > .nv-axisMaxMin > text').each(function(d,i) {
d3.select(this).attr('dy', '1.5em');
});
nv.utils.windowResize(chart.update);
return chart;
});
}
$scope.toggle2nd = function() {
data1.push(data2);
drawChart(data1);
}
我删除了对地图功能的需求（不同的错误）
然后为了将第二个图表添加到数据数组中，我更新了 toggle2nd() 函数，如下所示：
function toggle2nd() {
vm.multiChart = !vm.multiChart;
if (vm.multiChart) {
data.push(data2[0]);
drawChart(data);
}
}
完整代码：
var data = [{
"key": "Price",
"type": "line",
"yAxis": 2,
"values": [
{ x: 1443621600000, y: 71.89 },
{ x: 1443619800000, y: 75.51 },
{ x: 1443618000000, y: 12.49 },
{ x: 1443616200000, y: 20.72 },
{ x: 1443612600000, y: 70.39 },
{ x: 1443610800000, y: 59.77 }
]
}];
var data2 = [{
"key": "Quantity1",
"type": "area",
"yAxis": 1,
"values": [
{ x: 1136005200000, y: 1 },
{ x: 1138683600000, y: 5 },
{ x: 1141102800000, y: 10 },
{ x: 1143781200000, y: 0 },
{ x: 1146369600000, y: 1 },
{ x: 1149048000000, y: 0 }
]
}];
// Draw initial chart:
drawChart(data);
function drawChart(res) {
console.log('res',res);
nv.addGraph(function() {
chart = nv.models.multiChart()
.margin({
top: 20,
right: 40,
bottom: 50,
left: 40
})
.yDomain1([0, 10])
.yDomain2([0, 100]) // hard-coded :<
.interpolate("linear") // don't smooth out the lines
.color(d3.scale.category10().range());
chart.xAxis.tickFormat(function(d) {
return d3.time.format('%I:%M')(new Date(d));
});
chart.yAxis1.tickFormat(d3.format(',f'));
chart.yAxis2.tickFormat(function(d) {
return '$' + d3.format(',f')(d)
});
d3.select('svg#chart')
.datum(res)
.transition().duration(500).call(chart);
chart.tooltip.hidden(true);
chart.update();
d3.selection.prototype.moveToFront = function() {
return this.each(function() {
this.parentNode.appendChild(this);
});
};
d3.selection.prototype.moveToBack = function() {
return this.each(function() {
var firstChild = this.parentNode.firstChild;
if (firstChild) {
this.parentNode.insertBefore(this, firstChild);
}
});
};
// d3.select('svg#chart .lines1wrap').moveToFront();
d3.select('svg#chart .lines2wrap').moveToFront();
d3.select('svg#chart .nv-areaWrap').moveToBack();
d3.select('.lines2Wrap').node().parentNode.insertBefore(d3.select('.stack1Wrap').node(), d3.select('.lines2Wrap').node());
// Add top padding to xAxis timeline:
d3.selectAll('.nv-x.nv-axis > .nv-wrap.nv-axis > g > g.tick > text').each(function(d,i) {
d3.select(this).attr('dy', '1.5em');
});
d3.selectAll('.nv-x.nv-axis > .nv-wrap.nv-axis > .nv-axisMaxMin > text').each(function(d,i) {
d3.select(this).attr('dy', '1.5em');
});
nv.utils.windowResize(chart.update);
return chart;
});
}
function toggle2nd() {
vm.multiChart = !vm.multiChart;
if (vm.multiChart) {
data.push(data2[0]);
drawChart(data);
}
}