D3饼图没有更新

时间:2016-05-09 17:05:34

标签: javascript d3.js pie-chart

我知道这个问题已被多次询问,但在这里我不知道我的构造有什么问题。 .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;
});

1 个答案:

答案 0 :(得分:1)

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

&#13;
&#13;
class Assignment < ActiveRecord::Base
  belongs_to :person
  belongs_to :house_activity

  def self.time_allocation #fulltime
    Assignment.all.each do |assignment|
      if (assignment.person.time_allocation.present?)
        assignment.person.time_allocation += assignment.house_activity.duration
      else
        assignment.person.time_allocation = assignment.house_activity.duration
      end
    end
  end

end
&#13;
&#13;
&#13;