javascript - 平移/缩放 d3.js 图表中新添加的点

Question

有 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);


 }

Answer 1

问题在于 zoomed 函数未定义为类成员，并且使用变量 data、x、 y 等来自其闭包。当调用 zoomed 函数时，这些变量不会更新。

尽管这种封装图表的方法可能可行，但最标准的方法是创建 d3-esque functions .