Почему удаление, а затем повторное добавление баров к моей диаграмме столбцов меняет положение баров?

Question

В моем jsfiddle, если вы нажмете кнопку Pending в легенде, она должна удалить бары, связанные с этой категорией. Это работает, но когда я нажимаю кнопку Reset Legend (которая предоставляет метод currateData с исходными данными, чтобы возвращались строки Pending), он загружает старые ожидающие данные.

Я считаю, что это что-то делать с этим методом:

function redrawPlot() { 
    svg = d3.select('svg.chart') 
     .attr('width', width) 
     .attr('height', height); 

    svg.selectAll('g.xaxis') 
     .attr('transform', 'translate(0, ' + (height - margin.top - margin.bottom) + ')'); 
} 

Я не могу удалить этот метод, потому что мой код является более сложным, то, что показ в jsfiddle, это просто показывает проблему. Мне также нужно обновить ширину и высоту в методе перерисовывания, поэтому я не могу просто удалить его.

Как изменить метод redrawPlot(), чтобы при повторной настройке диаграммы он не испортил позиции бара при добавлении старых данных?

Answer 1

Проблема была в функции redrawPlot:

var svg; 

function initPlot() { 
    svg = d3.select('#graphTest') // <-- `svg` is the appended `g` 
     .append('svg') 
     // ... 
     .append('g') 

    // ... 
} 

// ... 

function redrawPlot() { 
    svg = d3.select('svg.chart') // <-- redefining `svg` to be `svg` 

    // ... 
} 

Проблема заключалась в том, что вы используете глобальную переменную svg и переосмысление его в redrawPlot. Если вы сохраните определение svg в качестве исходного определения, график обновится по мере необходимости. Второе определение svg, локальное на redrawPlot, путем добавления var решило проблему.

В качестве опоры старайтесь придерживаться reusable chart pattern и избегайте использования глобальных переменных.

Demo

Если вы хотите переопределить svg переменной

Отказ/Предупреждение: Это будет приводить к неосновательный код, не рекомендуется.

Demo 2