1

在我的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() 方法，以便在重新填充图表时，添加旧数据时不会弄乱条形位置？

4

1 回答 1

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原始定义，则图表会根据需要进行更新。通过添加 a对svglocal to进行第二个定义解决了这个问题。redrawPlotvar

作为旁注，请尝试坚持可重复使用的图表模式并避免使用全局变量。

Demo

如果要重新定义svg变量

免责声明/警告：这将导致无法维护的代码，不推荐。

Demo 2

于 2013-11-07T19:22:47.957 回答