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

为什么删除，然后重新添加栏到我的堆栈条形图改变条的位置？

1 个答案: