d3.js 在点击时更改数据（环形图的多个实例）

Question

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

这就是我到目前为止所得到的（我很高兴它可以工作）：

 /*-------------------------data is parsed and proceedet above----------------------------------------------------*/

        var SVGWidth = 1670;
        var SVGeight = 800;
        var kreis = 1;
        var ringArea = 1;
        var width = 1;
        var multi = 3.5;


        var color = d3.scale.ordinal().range(['#FFFFFF', '#DADAD9', '#9D9C9C']);
        var arc = d3.svg.arc().innerRadius(function(d) {
            donutWidth = Math.sqrt(d.data.WHI1 / Math.PI + Math.pow(d.data.E1, 2)) * multi - d.data.E1 * multi
            return donutWidth;
        }).outerRadius(function(d, i) {
            width = Math.sqrt(d.data.WHI1 / Math.PI + Math.pow(d.data.E1, 2)) * multi
            return width;
        });
        var pie = d3.layout.pie().value(function(d) {
            return d.country;
        }).sort(null);

        var svg = d3.select('#chart')
        .append('svg')
        .attr('width', SVGWidth)
        .attr('height', SVGeight)
        .append("g")

        svg.selectAll("g")
        .data(data1995).
        enter().append("g")
        .attr({
            transform: function(d, i) {
                var pos = coord2Pt(geo[i][1], geo[i][2], 1.0);
                return "translate(" + pos.x + ", " + pos.y + ")";
            }
        }).selectAll('path').data(function(country, i) {
            return pie(country.map(function(value) {
                return {
                    country: value,
                    WHI1: WHI1[i],
                    E1: E1[i]
                };
            }));
        })
        .enter()
        .append('path')
        .attr('d', function(d) {
            return arc(d);
        }).attr('fill', function(d, i) {
            return color(i);
        });
    });
})(window.d3);

这导致了这个可视化： Worldmap donut

我现在要做的是通过单击“测试”将我的数据从“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));
                };
           }
        });

这就是我在此处的另一个线程上发现的 (update d3 pie chart with new data.json) 但事实上，如果我将它翻译成我的脚本，我什至都不确定，我很好奇这是否适用于我所有的甜甜圈实例。

Answer 1

我建议你添加一个带有 onclick 属性的按钮，例如一个 update() 函数。

此函数加载 data2015 并将 WHI1 更改为 WHI2 并将 E1 更改为 E2。 所以这个函数和你已经写的很相似。

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

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

http://www.d3noob.org/2013/02/update-d3js-data-dynamically-button.html

http://bl.ocks.org/d3noob/7030f35b72de721622b8