Панорамирование/Масштабирование новых добавленных точек на d3.js Диаграмма

Question

Существует 2 набора массивов, исходный набор данных - 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.