是否可以启动所有值为0的D3JS饼图？ [英] Is it possible to start a D3JS pie chart with all values being 0?

问题描述

我正在创建一个简单的工具来显示一组由用户操作的值。我想要所有的值从0开始，当数据被操纵，从那里增长。

我有一切设置，除非我在控制台中得到错误

这是我现在有的代码如果值大于0，它是工作的）：

  var width = this.get（'width'）; 
 var height = this.get（'height'）; 
 var radius = Math.min（width，height）/ 2; 
 var color = this.get（'chartColors'）; 
 var data = this.get（'chartData'）; 
 
 var arc = d3.svg.arc（）
 .outerRadius（radius）
 .innerRadius（0）; 
 
 
 var pie = d3.layout.pie（）
 .sort（null）
 .value（function（d）{return d.count;}） ; 
 
 
 var id = this。$（）。attr（'id'）; 
 var svg = d3.select（＃+ id）
 .attr（width，width）
 .attr（height，height）
 .append g）
 .attr（transform，translate（+ width / 2 +，+ height / 2 +））; 
 
 var g = svg.selectAll（path）
 .data（pie（data））; 
 
 g.enter（）
 .append（path）
 .attr（d，arc）
 .each ._current = d;}）
 .style（fill，function（d，i）{return color [i];}）
 .style（stroke，white）
 .style（stroke-width，2）; 
  

解决方案

问题是一个概念性的 - 0，你怎么画饼图？然而，您可以从空数据集开始，并添加新数据，因为它变得大于零。这会使饼图段的增长从0到其所需的大小产生动画效果。

为此，您可以对饼图段的结束角度进行动画处理在起始角度。最简单的方法是复制相应的数据对象和补间角度：

  .each（function（d）{ 
 this._current = JSON.parse（JSON.stringify（d））; 
 this._current.endAngle = this._current.startAngle; 
}）
 .transition（） .duration（dur）.attrTween（d，arcTween）; 
  

随机示例此处。

I'm making a simple tool to display a set of values that are manipulated by the user. I want all the values to start at 0 and when the data is manipulated, to grow from there.

I have everything setup except that I get errors in the console when I start all my values at 0.

Is this possible?

Here's the code I have at the moment (which is working if the values are greater than 0):

    var width = this.get('width');
    var height = this.get('height');
    var radius = Math.min(width, height) / 2;
    var color = this.get('chartColors');
    var data = this.get('chartData');

    var arc = d3.svg.arc()
        .outerRadius(radius)
        .innerRadius(0);


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


    var id = this.$().attr('id');
    var svg = d3.select("#"+id)
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    var g = svg.selectAll("path")
        .data(pie(data));

    g.enter()
        .append("path")
        .attr("d", arc)
        .each(function(d){ this._current = d; })
        .style("fill", function(d, i) { return color[i]; })
        .style("stroke", "white")
        .style("stroke-width", 2);

解决方案

The problem is a conceptual one -- if everything is 0, how are you going to draw a pie chart? You could however start with an empty data set and add new data as it becomes greater than zero. That leaves the problem of animating the growth of a pie chart segment from 0 to its desired size.

For this, you can animate the end angle of the pie chart segments starting at the start angle. The easiest way to do this is to copy the corresponding data object and tween the angle:

.each(function(d) {
    this._current = JSON.parse(JSON.stringify(d));
    this._current.endAngle = this._current.startAngle;
})
.transition().duration(dur).attrTween("d", arcTween);

Random example here.

这篇关于是否可以启动所有值为0的D3JS饼图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！