D3 - 堆栈函数条形图过滤器

Question

我这里有一个密码笔 - https://codepen.io/anon/pen/WdWyem?editors=1010

我有一个带有图例的简单堆积条形图

我正在尝试使用图例来过滤条形图。

当我单击图例中的彩色块时，我想从图表中删除该条。

我有一些基本数据，我正在使用 D3 的堆栈来创建stackedSeries 并从数组'keys'中传递键

我使用相同的“键”来创建图例并向每个块添加一个类，即键的名称

当点击块时，我想捕获键名并将其从键数组中删除，然后再次运行堆栈函数并重新绘制图表。

这不起作用，我看不到如何更改键数组并重新运行堆栈和

我还没有想过要拿回酒吧。

stack = d3.stack()
    .keys(getKeys());

function getKeys() {
    console.log(keys)
    return keys
}

function createStack() {
    console.log('here');
    stackedSeries = stack(dataToStack);
}

createStack();

Answer 1

要重新绘制图表，您需要重新创建 stack，因此只需将您的 stack 创建移动到 createStack 函数中：

function createStack() {
    stack = d3.stack()
        .keys(getKeys());
    console.log('here');
    stackedSeries = stack(dataToStack);
}

您还必须添加与条形颜色相关的逻辑。例如，您可以像更改 keys 数组一样动态更改 colors 数组