有 2 组数组，初始数据集是 data，较新的数据集是 data2。将数据添加到绘图后，可以进行平移和缩放。我创建了一个 Chart 类来处理 d3.js 绘图。
但是，在使用 chart.update(chart.data2) 使用数组 data2 更新绘图后，只有 data 中的点平移并缩放时，data2 中的点保持静止。 chart.update() 的代码是否有错误？
jsfiddle: http://jsfiddle.net/kzQ6K/
chart.update()
/**
* Update Chart with new Data
*/
this.update = function(newData) {
uniqueNewData = _.difference(newData, this.data);
this.data = _.union(this.data, uniqueNewData);
// Update axes
var yMin = d3.min(this.data.map( function(d) {return d.score;} ));
var yMax = d3.max(this.data.map( function(d) {return d.score;} ));
var xMin = d3.min(this.data.map( function(d) {return d.timestamp;} ));
var xMax = d3.max(this.data.map( function(d) {return d.timestamp;} ));
y.domain([yMin, yMax]);
x.domain([xMin, xMax]);
// Draw rects
var svg = d3.select(this.div + ' svg');
var rects = svg.selectAll('rect.data')
.data(this.data, function(d) { return d.timestamp || d3.select(this).attr('timestamp'); });
rects
.enter()
.append('rect')
.classed('data', true);
rects
.attr('x', function(d) { return x(d.timestamp); })
.attr('y', function(d) { return y(d.score); })
.attr('timestamp', function(d) { return d.timestamp; })
.attr('width', 4)
.attr('height', 10)
.attr('fill', 'red')
.attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');
svg.select('.x.axis').call(xAxis);
svg.select('.y.axis').call(yAxis);
}
最佳答案
问题在于 zoomed 函数未定义为类成员，并且使用变量 data、x、 y 等来自其闭包。当调用 zoomed 函数时，这些变量不会更新。
尽管这种封装图表的方法可能可行，但最标准的方法是创建 d3-esque functions .
关于javascript - 平移/缩放 d3.js 图表中新添加的点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20724917/