Javascript 具有多个甜甜圈的圆弧过渡

我试图在数据更新时获取div中包含的id为“donut”的多个甜甜圈的转换。 我有一组数据：

  self.data = {
        counts: [35, 10, 60, 21],
        hours: [22, 66, 10, 120],
        secs: [1, 1, 1, 1]
    };

我的全局值设置如下：

   var width = 134,
   height = 134,
   cwidth = 20;
   var color = d3.scale.category20();

我使用此功能设置多个甜甜圈：

self.setupFanChart = function() {

       self.pie = d3.layout.pie()
                .sort(null);

        self.arc = d3.svg.arc();
        self.svg = d3.select("#donut")
                .append("svg").attr("width", width)
                .attr("height", height)
                .append("g")
                .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
        self.gs = self.svg.selectAll("g").data(d3.values(self.data)).enter().append("g");
        self.path = self.gs.selectAll("path")
                .data(function(d) {
                    return self.pie(d);
                })
                .enter().append("path")
                .attr("fill", function(d, i) {
                    return color(i);
                })
                .attr("d", function(d, i, j) {
                    return self.arc.innerRadius(20 + cwidth * j).outerRadius(15 + cwidth * (j + 1))(d);
                })
                .each(function(d) { this._current = d; }); // store the initial angles;


        self.svg.append("text")
                .attr("dy", ".35em")
                .style("text-anchor", "middle")
                .attr("class", "inside")
                .text(function(d) {
                    return '56%';
                });
        self.svg.append("text")
                .attr("dy", "2em")
                .style("text-anchor", "middle")
                .attr("class", "data")
                .text(function(d) {
                    return 'some text';
                });


    };

self.updateFanChart = function(data,color) {
        self.gs = self.svg.selectAll("g").data(d3.values(data));
        self.pie=self.pie.value(function(d) { return d; }); 
        self.path = self.gs.select("path")
                .data(self.pie)
                .attr("fill", function(d, i) {
                    return color(i);
                })
                .attr("d", function(d, i, j) {
                    return self.arc.innerRadius(20 + cwidth * j).outerRadius(15 + cwidth * (j + 1))(d);
                })
                .each(function(d) { this._current = d; }); // store the initial angles;


        self.svg.append("text")
                .attr("dy", ".35em")
                .style("text-anchor", "middle")
                .attr("class", "inside")
                .text(function(d) {
                    return '56%';
                });
        self.svg.append("text")
                .attr("dy", "2em")
                .style("text-anchor", "middle")
                .attr("class", "data")
                .text(function(d) {
                    return 'some text';
                });
        self.data = {
            counts: [1, 1, 1, 1],
            hours: [1, 1, 1, 1],
            secs: [1, 1, 1, 1]
        };

当我调用update函数时，使用api调用每10秒更新一次：

self.setupFanChart = function() {

       self.pie = d3.layout.pie()
                .sort(null);

        self.arc = d3.svg.arc();
        self.svg = d3.select("#donut")
                .append("svg").attr("width", width)
                .attr("height", height)
                .append("g")
                .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
        self.gs = self.svg.selectAll("g").data(d3.values(self.data)).enter().append("g");
        self.path = self.gs.selectAll("path")
                .data(function(d) {
                    return self.pie(d);
                })
                .enter().append("path")
                .attr("fill", function(d, i) {
                    return color(i);
                })
                .attr("d", function(d, i, j) {
                    return self.arc.innerRadius(20 + cwidth * j).outerRadius(15 + cwidth * (j + 1))(d);
                })
                .each(function(d) { this._current = d; }); // store the initial angles;


        self.svg.append("text")
                .attr("dy", ".35em")
                .style("text-anchor", "middle")
                .attr("class", "inside")
                .text(function(d) {
                    return '56%';
                });
        self.svg.append("text")
                .attr("dy", "2em")
                .style("text-anchor", "middle")
                .attr("class", "data")
                .text(function(d) {
                    return 'some text';
                });


    };

self.updateFanChart = function(data,color) {
        self.gs = self.svg.selectAll("g").data(d3.values(data));
        self.pie=self.pie.value(function(d) { return d; }); 
        self.path = self.gs.select("path")
                .data(self.pie)
                .attr("fill", function(d, i) {
                    return color(i);
                })
                .attr("d", function(d, i, j) {
                    return self.arc.innerRadius(20 + cwidth * j).outerRadius(15 + cwidth * (j + 1))(d);
                })
                .each(function(d) { this._current = d; }); // store the initial angles;


        self.svg.append("text")
                .attr("dy", ".35em")
                .style("text-anchor", "middle")
                .attr("class", "inside")
                .text(function(d) {
                    return '56%';
                });
        self.svg.append("text")
                .attr("dy", "2em")
                .style("text-anchor", "middle")
                .attr("class", "data")
                .text(function(d) {
                    return 'some text';
                });
        self.data = {
            counts: [1, 1, 1, 1],
            hours: [1, 1, 1, 1],
            secs: [1, 1, 1, 1]
        };

使用初始值创建多个甜甜圈，但没有更新值，我可以在watch调试器中看到它们得到了正确更新，我收到一个错误消息：

Uncaught TypeError: Cannot read property 'map' of undefined d3.min.js:4n d3.min.js:4pa.data d3.min.js:3self.updateFanChart

---

你能提供一个可复制的例子吗，例如在JSFIDLE上？成功了：我没有选择所有路径：self.path=self.gs.selectAll（“路径”）.data（self.pie）.attr（“填充”，函数（d，I）{return color（I）；}）.attr（“d”，函数（d，I，j）{return self.arc.innerRadius（20+cwidth*j）.outerRadius（15+cwidth*（j+1））（d）；}）.each（函数（d）{this._current=d；}）//存储初始角度；