Javascript d3.js单击即可更改数据（圆环图的多个实例）

我正在尝试使用d3.js进行数据可视化。我是d3新手，我想我不太明白如何通过点击改变数据，所以我需要你的帮助

这就是我目前所得到的（我很高兴它能起作用）：

这导致了这种可视化：

我现在要做的是，点击“测试”按钮，将我的数据从“data1995”更改为“data2015”，将“WHI1”更改为“WHI2”，将“E1”更改为“E2”。此外，如果他们能随着过渡而改变，那就太好了

如果我在正确的道路上实现了这一点，我就不是舒尔，但到目前为止，我已经尝试过这一点：

            d3.select("button").on('click', function() {
            console.log("click")
            d3.selectAll('path').transition().duration(500).attr("fill", function(d, i) {
                return color(i);
            }).attr("d", arc).each(function(d) {
                this._current = d;
            });

            function change(data2015) {
                return pie(country.map(function(value) {
                    return {
                        country: value,
                        WHI2: WHI2[i],
                        E2: E2[i]
                    };
                }));
                path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
            }

            function arcTween(a) {
                var i = d3.interpolate(this._current, a);
                this._current = i(0);
                return function(t) {
                    return arc(i(t));
                };
           }
        });

这就是我在另一个帖子上发现的（）

---

但事实上，如果我把它翻译成我的脚本，我甚至不是舒尔，我很好奇这是否适用于我所有的甜甜圈实例。

我建议您添加一个带有onclick属性的按钮，例如update（）函数

此功能加载数据2015，并将WHI1更改为WHI2，将E1更改为E2。 所以这个函数与您已经编写的非常相似

我认为这种方法更好，因为你不需要像你发布的链接那样频繁地更新图表

我找到了一个示例链接，请看这些链接：

---

首先，非常感谢您！在昨天12个小时的尝试和错误之后，我已经尝试了所有这些。现在我不知道它为什么不起作用，以及如何将这些示例正确地应用到我的代码中。

            d3.select("button").on('click', function() {
            console.log("click")
            d3.selectAll('path').transition().duration(500).attr("fill", function(d, i) {
                return color(i);
            }).attr("d", arc).each(function(d) {
                this._current = d;
            });

            function change(data2015) {
                return pie(country.map(function(value) {
                    return {
                        country: value,
                        WHI2: WHI2[i],
                        E2: E2[i]
                    };
                }));
                path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
            }

            function arcTween(a) {
                var i = d3.interpolate(this._current, a);
                this._current = i(0);
                return function(t) {
                    return arc(i(t));
                };
           }
        });