javascript - D3饼图未更新

Question

我知道这个问题已经被问过很多次了，但在这里我不知道我的构造有什么问题。 .draw() 在开始时被调用一次，然后当新数据到达时调用 update() ，知道出了什么问题吗？非常感谢:

function Donut(el, data, params) {
        var self = this;
        this.el = el;
        this.initChart(data,params);
    }

    Donut.prototype.initChart = function(data, params) {
        var self = this;
        this.margin = {
            top: 5,
            right: 10,
            bottom: 5,
            left: 0
        }
        this.width = $(this.el).width() - this.margin.left - this.margin.right;
        this.height = $(this.el).height() - this.margin.top - this.margin.bottom;
        this.radius = Math.min(this.width,this.height)/2;

        var visWidth = $(this.el).width();
        var visHeight = $(this.el).height();

        this.svg = d3.select(this.el)
            .append('svg')
            .attr("class", 'donut')
            .attr("width", visWidth)
            .attr("height", visHeight)
            .append('g')
            .attr('class','donutLayer')
            .attr('transform', 'translate(' + visWidth/2 + ',' + visHeight/2 + ')');

        this.arc = d3.svg.arc()
            .outerRadius(this.radius-20)
            .innerRadius(25);

        this.draw(data, params);

    }

    Donut.prototype.draw = function(data,params) {
        var self = this;
        this.data = data;

        this.pie = d3.layout.pie()
            .sort(null)
            .value(function(d) { return d.taux; });

        this.color = this.findColor(data.occupationRate);

        this.data = this.parseData(data);

        this.g = self.svg.selectAll('.arc')
            .data(self.pie(self.data));

        this.g.enter().append("g")
            .attr("class", "arc");

        this.g.append("path")
            .attr("d", self.arc)
            .style("fill", function(d) {
                return d.data.color;
            });

        this.g.append('text')
            .attr('transform', function() {
                return "translate(2,9)";
            })
            .style({'font-size':'20px', 'fill': self.color})
            .text(function() {
                return data.occupationRate + '%';
            });

        this.g.append('text')
            .attr('transform', function() {
                return "translate(90,10)";
            })
            .attr('id', params.id+'Label')
            .style({'font-size':'25px', 'fill': self.color})
            .text(function() {
                return params.name;
            });
    }

    Donut.prototype.update = function(data, params) {
        var self = this;
        var parsedData = this.parseData(data);
        //console.log('update sidebarmyseat');
        window.data = parsedData;
        window.pie = self.pie(parsedData);
        this.pie.value(function(d) { return d.taux; });
        this.g.data(self.pie(parsedData));
        this.g.selectAll('path')
            .attr("d", self.arc)
            .style("fill", function(d) {
                return d.data.color;
        });
    }

    Donut.prototype.findColor = function findColor(or) {
        if(or <= 50) {
            var color =  '#48ba56';
        } else if(or > 50 && or <= 75) {
            var color = '#fba22e';
        } else if(or >75) {
            var color = '#e70033';
        }

        return color;
    }

    Donut.prototype.parseData = function(data) {
        var self = this;
        var parsedData = [
            {
                type: 'occupée',
                taux: data.occupationRate,
                color: self.color
            },
            {
                type: 'libre',
                taux: 100 - data.occupationRate,
                color: '#d2d2d2'
            },
        ];
        return parsedData;
    }

    return Donut;
});

Answer 1

尝试使用以下代码部分，看看它们是否可以解决您的问题。

Donut.prototype.draw = function(data, params) {
  // ...
  this.g.selectAll('.percentage-text') // Selection :O
    .data(function(d) { // Set data to corresponding selection    
      return [d];
    })
    .enter()
    .append('text') // Append node text
    .attr('class', 'percentage-text') // Add class to later have reference on how to update
    .attr("transform", function(d) { // Use function to position text inside arcs [http://bl.ocks.org/mbostock/3887193]
      return "translate(" + self.arc.centroid(d) + ")";
    })
    .text(function(d) { // Set text with desired values
      return d.data.taux;
    });
  // ...
}

Donut.prototype.update = function(data, params) {
  var self = this;
  var parsedData = this.parseData(data);
  //console.log('update sidebarmyseat');
  window.data = parsedData;
  window.pie = self.pie(parsedData);
  this.pie.value(function(d) {
    return d.taux;
  });
  this.g.data(self.pie(parsedData)) // setting new data to you .arc elements and returns [Array[2]] with the updated slices
    .select('path') // select the path of the newly updated slices
    .attr('d', self.arc) // use your arc fn to redefine the path of the slice

  // Update text
  this.g.selectAll('.percentage-text') // Use our class defined in draw to select desired update nodes
    .data(function(d) { // Set new data
      return [d];
    })
    .attr("transform", function(d) { // Position
      return "translate(" + self.arc.centroid(d) + ")";
    })
    .text(function(d) { // Set text
      return d.data.taux;
    });
}