Question

我的页面有一组输入无线电选项和一个nvd3图形。我希望当用户点击其中一个无线电选项时，图表代表该无线电选项的值。我在Strange functionality of NVD3 Graph when updating data的帮助下找到了如何做到这一点只有我的代码不能100％工作。图表中的数据仅在调整屏幕大小后才会更新。我在这里缺少什么？

这是我的代码：http://jsfiddle.net/h4tzLd1u/3/

var staafgrafiek;
var chartData;
nv.addGraph(function () {
var width = 320,
height = 300;
var staafgrafiek = nv.models.multiBarChart();
staafgrafiek.showControls(false)
staafgrafiek.groupSpacing(0.05)
staafgrafiek.reduceXTicks(false)
staafgrafiek.yAxis.tickFormat(function (d) {
return '€' + d3.format('s')(d)
})
staafgrafiek.xAxis.tickFormat(d3.format('.0f'))
staafgrafiek.width(width)
staafgrafiek.height(height)

var data_2011 = [{
key: "Salary",
color: "#d96704",
values: [{
x: 2011,
y: 38788
}, {
x: 2012,
y: 2001
}, {
x: 2013,
y: 50000
}]
}, {
key: "Adjusted",
color: "#3c8c30",
values: [{
x: 2011,
y: 30263
}, {
x: 2012,
y: 30263
}, {
x: 2013,
y: 30263
}]
}];

chartData = d3.select('#staafgrafiek svg').datum(data_2011);
chartData.transition().duration(1000).call(staafgrafiek).attr('width', width).attr('height', height);


nv.utils.windowResize(staafgrafiek.update);

return staafgrafiek;
});

var data_2009 = [{
key: "Salary",
color: "#d96704",
values: [{
x: 2009,
y: 5000
}, {
x: 2010,
y: 25000
}, {
x: 2011,
y: 3000
}]
}, {
key: "Adjusted",
color: "#3c8c30",
values: [{
x: 2009,
y: 22002
}, {
x: 2010,
y: 22002
}, {
x: 2011,
y: 22002
}]
}];

function update_2009() {

chartData.datum(data_2009).transition().duration(1000).call(staafgrafiek);
nv.utils.windowResize(staafgrafiek.update);

};

d3.select("#input_2009").on("click", update_2009);

var data_2010 = [{
key: "Salary",
color: "#d96704",
values: [{
x: 2010,
y: 25000
}, {
x: 2011,
y: 3000
}, {
x: 2012,
y: 2001
}]
}, {
key: "Adjusted",
color: "#3c8c30",
values: [{
x: 2010,
y: 21000
}, {
x: 2011,
y: 21000
}, {
x: 2012,
y: 21000
}]
}];

function update_2010() {

chartData.datum(data_2010).transition().duration(1000).call(staafgrafiek);
nv.utils.windowResize(staafgrafiek.update);

};

d3.select("#input_2010").on("click", update_2010);

var data_2011 = [{
key: "Inkomen uit werk en woning",
color: "#d96704",
values: [{
x: 2011,
y: 38788
}, {
x: 2012,
y: 2001
}, {
x: 2013,
y: 50000
}]
}, {
key: "Adjusted",
color: "#3c8c30",
values: [{
x: 2011,
y: 30263
}, {
x: 2012,
y: 30263
}, {
x: 2013,
y: 30263
}]
}];

感谢任何帮助！

Answer 1

我最终解决了。

var data_2009

和

var data_2010

应放在更新部分中。不在它之外。例如

function update_2010() {

var data_2010 = [{
key: "Salary",
color: "#d96704",
values: [{
x: 2010,
y: 25000
}, {
x: 2011,
y: 3000
}, {
x: 2012,
y: 2001
}]
}, {
key: "Adjusted",
color: "#3c8c30",
values: [{
x: 2010,
y: 21000
}, {
x: 2011,
y: 21000
}, {
x: 2012,
y: 21000
}]
}];

chartData.datum(data_2010).transition().duration(1000).call(staafgrafiek);
nv.utils.windowResize(staafgrafiek.update);

};

仅在调整屏幕大小时更改nvd3图表

1 个答案: