Question

我想向SVG中的所有路径元素添加一个仅扩展外半径的转换。我试图为我制作的所有迷你弧创造一种增长效果。

一旦完成了所有的弧线，我希望只有外半径可以扩展所有弧线。因此，例如，我希望所有弧形路径的外半径都扩展5，但我希望它们保留所有其他属性。我尝试更改outerRadius属性，然后再次调用arc，但这会重置所有其他属性，如开始和结束角度。这是我的代码： http://codepen.io/nsohail92/pen/obNRvv

var width = 1200;
var height = 1200;
var innerRadius = height/2.5;
var outerRadius = height/2;
var count = 0;
var startAngle = 0;
var increment = (360/16) / 100; //.025
var endAngle;

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

function createArc() {

     endAngle = startAngle + increment;

     drawArc
     .innerRadius(innerRadius)
     .outerRadius(outerRadius)
     .startAngle(startAngle)
     .endAngle(endAngle);

     svg.append("path")
     .attr("d", drawArc)
     .attr("fill", "#81ecb5")
     .attr("transform", "translate(600,600)");


    if(endAngle < 5) {
        count = count + 1;
        startAngle = endAngle + .02;    
    }

    else {
    var pathArray = svg.selectAll("path");
    console.log(pathArray);

    drawArc.outerRadius(550);
    svg.select("path#path_0").transition().duration(1500).attr("d", drawArc);
    return;   
    }

    createArc();
}

createArc();

Answer 1

评论内联

var drawArcs = [];//stores all the arcs
var paths = [];//stores all the paths.

function createArc() {
  var drawArc = d3.svg.arc();//make an arc object every time.
  drawArcs.push(drawArc);//push the arc object
  endAngle = startAngle + increment;

      drawArc
        .innerRadius(innerRadius)
        .outerRadius(600)
        .startAngle(startAngle)
        .endAngle(endAngle);
     //make the path
      var path = svg.append("path")
        .attr("id", "path_" + count)
        .attr("d", drawArc)
        .attr("fill", "#81ecb5")
        .attr("transform", "translate(600,600)");
      paths.push(path);

      if (endAngle < 5) {
        count = count + 1;
        startAngle = endAngle + .02;
      } else {
        //each drawArc increase outer radius
        drawArcs.forEach(function(d, i) {
          d.outerRadius(750);
          //to the path put the transition for new radius
          paths[i].transition().duration(1500).attr("d", d);
        });
        return;
      }

      createArc();

    }

工作代码here

希望这有帮助！

Answer 2

我们可以为每条路径提供id，我们可以为每个路径调用单独的转换

var svg = d3.select("body")
.append("svg")
.attr("width", 400)
.attr("height", 400)
.append("g")
.attr("transform", "translate(100,100)");
var arc = d3.svg.arc()
.innerRadius(20)
.outerRadius(20)
.startAngle(0)
.endAngle(Math.PI);
svg.append("path")
.attr("id", "arc1")
.attr("d", arc);
arc.outerRadius(70);
d3.select("#arc1").transition()
.duration(1000)
.attr("d", arc)

Code Fiddle

如何仅转换弧d3.js的半径属性

2 个答案: