Question

我正在使用pie创建d3.js图表。我想创建带有动画的单svg元素的3个馅饼。

这对我来说很好。但是创建不同的我每次使用循环时都会减少radius。但radius没有改变。怎么解决这个问题？

我的代码（示例）：

var array1 = [

  0,200

]

window.onload = function () {

  var width = 660,
    height = 200,
    radius = Math.min(width, height) / 2;

var color = d3.scale.category20();

var arc = null;

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

 function tweenPie(finish) {


    var start = {
            startAngle: 0,
            endAngle: 0
        };
    var i = d3.interpolate(start, finish);
    return function(d) { return arc(i(d)); };
}

var svg1 = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);



  for( var i = 0; i < 3; i++) {

    arc = d3.svg.arc()
    .innerRadius(radius - (5*i)) //each time size differs
    .outerRadius(radius - (6)*i); //each time size differs

      svg1.append('g')
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
      .datum(array1).selectAll("path")
      .data(pie) 
      .enter().append("path")
      .attr("fill", function(d, i) { return color(i); })
      .transition()
      .duration(5000)
      .attrTween('d', tweenPie)

  }

}

Live Demo

Answer 1

在tweenPie方法和for循环中使用了一个arc变量。每次通过for循环，arc变量都设置为新值。在for循环退出后，为每个饼图调用tweenPie方法。因此，所有饼图都使用相同的tweenPie方法，该方法使用在最后一个for循环中创建的弧。

对于每个饼图，您需要使用自己的弧创建单独的tweenPie方法。例如......

var array1 = [ 0, 200 ]

window.onload = function () {

    var width = 660,
        height = 200,
        radius = Math.min(width, height) / 2;

    var color = d3.scale.category20();

    var arc = null;

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

    function getTweenPie(arc) {
        return function (finish) {
            var start = {
                startAngle: 0,
                endAngle: 0
            };
            var i = d3.interpolate(start, finish);
            return function(d) { return arc(i(d)); };
        }
    }

    var svg1 = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

    for( var i = 0; i < 3; i++) {

        arc = d3.svg.arc()
            .innerRadius(radius - (5*i)) //each time size differs
            .outerRadius(radius - (6)*i); //each time size differs

        svg1.append('g')
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
            .datum(array1).selectAll("path")
            .data(pie) 
            .enter().append("path")
            .attr("fill", function(d, i) { return color(i); })
            .transition()
            .duration(5000)
            .attrTween('d', getTweenPie(arc))

    }

}

制作不同大小的`radius`以创建`arc`不起作用

1 个答案: