Question

我试图获得div中包含的多个甜甜圈的转换，其中id为＃34; donut＆＃34;随着数据的更新。我有一系列数据：

  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';
                });


    };

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

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]
        };

使用初始值创建多个甜甜圈，但是值的更新没有发生，我可以看到它们在监视调试器中正确更新，我收到错误说：

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

带有多个甜甜圈的弧形过渡

0 个答案: