為什么刪除條形圖，然后再將其重新添加到我的堆棧條形圖中，會改變條形圖的位置？

Question

在我的jsfiddle中，如果單擊圖例中的Pending按鈕，則應刪除與該類別關聯的條形圖。 這currateData但是當我單擊“ 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中顯示的代碼更復雜，這只是在顯示問題。 我還需要在redraw方法中更新寬度和高度，所以我不能僅僅刪除它。

如何更改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的定義保留為原始定義，則圖形將根據需要進行更新。 通過添加var使svg的第二個定義成為本地的redrawPlot解決了該問題。

作為旁注，請嘗試堅持使用可重用的圖表模式，並避免使用全局變量。

演示

如果要重新定義svg變量

免責聲明/警告 ：這將導致代碼無法維護，不建議使用。

演示2