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

Question

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

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

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

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

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

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

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

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

我还没有想过取回酒吧。

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 数组