Question

有两组数组，初始数据集为data，较新的数据集为data2。将data添加到绘图后，平移和缩放工作。我已经创建了一个Chart类来处理d3.js图。

然而，在使用data2更新数组chart.update(chart.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。

平移/缩放新添加的点到d3.js图表

1 个答案: