Question

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

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

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

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

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

我使用相同的'键'来创建图例，并为每个作为键名称的块添加一个类

单击该块时，我想捕获键名并将其从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);
}

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

一样动态更改keys数组

D3 - 堆栈功能条形图过滤器

1 个答案: