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”，点击“test”按钮。此外，如果他们会随着过渡而改变，那将会很棒。

如果我在正确的道路上实现这一目标，我并不感到害羞，但到目前为止我已经尝试过了：

            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

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

1 个答案: