Javascript 数据集中的新数据未得到更新
我有以下代码用dataset2更新chart1,但结果是mychart1值没有更新为dataset2中的新值。我希望dataset2中更新的值反映在myChart1中,但是当我查看调试器中分配的类时,旧数据正在更新 有人能告诉我哪里出了问题吗Javascript 数据集中的新数据未得到更新,javascript,d3.js,Javascript,D3.js,我有以下代码用dataset2更新chart1,但结果是mychart1值没有更新为dataset2中的新值。我希望dataset2中更新的值反映在myChart1中,但是当我查看调试器中分配的类时,旧数据正在更新 有人能告诉我哪里出了问题吗 function chart() { //Width and height var w = 200; var h = 100; var barPadding
function chart() {
//Width and height
var w = 200;
var h = 100;
var barPadding = 2;
var max = 0;
this.createChart = function(dataset,cls) {
//create svg element
var svg = d3.select("#chartDisplay").append("svg").attr("class",cls).attr(
"width", w).attr("height", h);
//create rect bars
var rect = svg.selectAll("rect").data(dataset,function(d, i) {return d;});
rect.enter()
.append("rect")
.attr("class","original")
.attr("x",function(d, i) {
return i * (w / dataset.length);
})
.attr("y", function(d) {
return h - d * 3; //Height minus data value
})
.attr("width", w / dataset.length - barPadding)
.attr("height", function(d) {
return d * 3;
});
max = d3.max(dataset);
var xScale = d3.scale.linear().domain([ 0, max ]).range(
[ 0, w ]);
}
this.updateChart = function(dataset,cls) {
var svg = d3.select("#chartDisplay").select("svg."+cls);
var rect = svg.selectAll('rect')
.data(dataset,function(d, i) {
return d;
});
rect.attr("y", function(d) {
return h - d * 3; //Height minus data value
})
.attr("height", function(d) {
return d * 3;
});
rect.attr("class","updated");
}
this.getMax = function() {
return max;
}
}
var dataset1 = [ 5, 10, 12, 19, 21, 25, 22, 18, 15, 13 ];
var dataset2 = [ 1, 4, 14, 19, 16, 30, 22, 18, 15, 13 ];
var myChart1 = new chart();
myChart1.createChart(dataset1,"chart1");
myChart1.updateChart(dataset2,"chart1");
var myChart2 = new chart();
myChart2.createChart(dataset2,"chart2");
这就是问题所在:
var rect = svg.selectAll('rect')
.data(dataset,function(d, i) { return d; });
这告诉d3使用数据值作为数组的键。由于您的值正在更改,不同的值不匹配,因此它们不会被更新(您需要使用另一个append
语句来显示它们)。因为您只有一个值数组,所以希望使用值的索引作为键(这样一来,dataset1中的元素1将使用dataset2中新元素1的值进行更新)
您可以专门使用索引作为键:
var rect = svg.selectAll('rect')
.data(dataset,function(d, i) { return i; });
或者更简单地说,这样做是因为使用索引作为键是默认行为
var rect = svg.selectAll('rect')
.data(dataset);
谢谢你的回答。第一个答案有效,但我只希望更新的rct更改颜色,但所有的rect都会更新类。这种行为有什么原因吗?