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

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();
    
    }

工作代码

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 vis = d3.select("body").append("svg");
var svg = vis.attr("width", width).attr("height", height); //give SVG attrs

//var arcExpand = d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius + 40);

var drawArcs = [];
var paths = [];

function createArc() {
  var drawArc = d3.svg.arc();
  drawArcs.push(drawArc);
  endAngle = startAngle + increment;

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

  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 {
    drawArcs.forEach(function(d, i) {
      d.outerRadius(750);
      paths[i].transition().duration(1500).attr("d", d);
    });
    return;
  }

  createArc();

}

createArc();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>

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