仅在调整屏幕尺寸时更改 nvd3 图形

Change in nvd3 graph only when screen size is adjusted

本文关键字：nvd3 图形 调整 屏幕      更新时间：2023-09-26

我有一组输入无线电选项和一个nvd3图形的页面。我希望当用户单击其中一个单选选项时，图形表示该单选选项的值。我找到了在更新数据时借助NVD3 Graph的奇怪功能来做到这一点的方法只有我的代码不能 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
}]
}];

任何帮助不胜感激！

我最终解决了它。

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);
};
相关文章：