是否可以在所有值都为0的情况下启动D3JS饼图

Is it possible to start a D3JS pie chart with all values being 0?

本文关键字：情况下 启动 饼图 D3JS 是否      更新时间：2024-03-09

我正在制作一个简单的工具来显示用户操作的一组值。我希望所有的值都从0开始，当数据被处理时，从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(function(d){ this._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);

此处为随机示例。

相关文章：