Question

我正在制作一个简单的工具来显示一组由用户操纵的值。我希望所有的值从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);

Answer 1

问题是概念问题 - 如果一切都是0，你打算怎么画饼图？但是，您可以从空数据集开始，并在它变为大于零时添加新数据。这就产生了将饼图段从0增长到所需大小的问题。

为此，您可以从起始角开始为饼图段的结束角设置动画。最简单的方法是复制相应的数据对象并补间角度：

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

随机示例here。

是否可以启动所有值为0的D3JS饼图？

1 个答案: