Javascript （功能（d）{ 返回半径刻度（0.9）； }) .innerRadius（50+2）//这是甜甜圈孔的大小 .外层（50+8） ); */ //选项2-吐温插值-产生误差 // ---------------------------------------_Javascript_D3.js

Javascript （功能（d）{ 返回半径刻度（0.9）； }) .innerRadius（50+2）//这是甜甜圈孔的大小 .外层（50+8） ); */ //选项2-吐温插值-产生误差 // ---------------------------------------

javascript d3.js

Javascript （功能（d）{ 返回半径刻度（0.9）； }) .innerRadius（50+2）//这是甜甜圈孔的大小 .外层（50+8） ); */ //选项2-吐温插值-产生误差 // ---------------------------------------,javascript,d3.js,Javascript,D3.js,（功能（d）{ 返回半径刻度（0.9）； }) .innerRadius（50+2）//这是甜甜圈孔的大小 .外层（50+8） ); */ //选项2-吐温插值-产生误差 // ----------------------------------------------- //Mike Bostock的Arc Tween代码http://bl.ocks.org/mbostock/5100636 //属性d错误：应为moveto路径命令（'M'或'M'），“函数（t）{\n…”。 var arc=

（功能（d）{ 返回半径刻度（0.9）； }) .innerRadius（50+2）//这是甜甜圈孔的大小 .外层（50+8） ); */ //选项2-吐温插值-产生误差 // ----------------------------------------------- //Mike Bostock的Arc Tween代码http://bl.ocks.org/mbostock/5100636 //属性d错误：应为moveto路径命令（'M'或'M'），“函数（t）{\n…”。 var arc=d3 .arc（） .内半径（50+2） .外层（50+8） .startAngle（0） .端角（0）； //设置结束角度的动画 svg .selectAll（“.chart1”） .transition（） .持续时间（3000） .延迟（0） .attrween（'d'，函数（d，i）{ var插值=d3.插值（0，半径刻度（d.pct））；返回函数（t）{ 圆弧端角（插值（t））；返回弧（）； }; });

这很好，谢谢@Mark并解决了我的问题。有没有办法使圆弧函数可重复使用，为不同的内半径和外半径值传递参数？谢谢，克里斯。@Chris，请参见上面的编辑。谢谢Mark。我知道我可以将半径添加到数据中，但因为它们只是表示，我更愿意了解有一种方法可以在创建图表时将它们作为参数包含，最好将它们传递给arc（）。

<html lang="en">
<head>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>

<body>
    <div id="vis">
    </div>
    <script src = 'SOarc.js'></script>
</body>
</html>

data = [
    {x:50, y: 250, pct: 0.25},
    {x:200, y: 250, pct: 0.50},
    {x:350, y: 250, pct: 0.75}]

radialScale = d3.scaleLinear()
  .domain([0, 1])
  .range([0, 2 * Math.PI]);

svg = d3.select("#vis")
    .append('svg')
    .attr('width', 500)
    .attr('height', 500)
    .attr('opacity', 1)

// Join to the data and create a group for each data point so that various chart items (e.g. multiple arcs) can be added
chartNodes = svg
    .selectAll('g.chartGroup')
    .data(data)

// Position each using transform/ translate with coordinates specified in data
chartNodesEnter = chartNodes
    .enter()
    .append('g')   
    .attr("class", "chartGroup")  
    .attr('transform', (d) => 'translate('+d.x+','+d.y+')');

// Add arcs to as per data
chartNodesEnter.append('path')
    .attr("class", "chart1")
    .attr('fill', "red")
    .attr('d', d3.arc()
        .startAngle(0)
        .endAngle((d) => radialScale(d.pct))
        .innerRadius(50+2)         // This is the size of the donut hole
        .outerRadius(50+8));

// Now animate to a different endAngle (90% in this example)

// Option 1 - Standard Interpolation - doesn't work with complex shapes
// --------------------------------------------------------------------
// Animate all arcs to 90% - doesn't animate properly as interpolation not correct for this complex shape
// and also throws Error: <path> attribute d: Expected arc flag ('0' or '1') errors for the same reason
svg.selectAll('.chart1')
    .transition().duration(3000).delay(0)
    .attr('d', d3.arc() 
        .startAngle(0)
        .endAngle(function(d){ return radialScale(0.9)})
        .innerRadius(50+2)         // This is the size of the donut hole
        .outerRadius(50+8)
    )

// Option 2 - Tween Interpolation - Produces error
// -----------------------------------------------
// Code from from Mike Bostock's Arc Tween http://bl.ocks.org/mbostock/5100636
// Errors with <path> attribute d: Expected moveto path command ('M' or 'm'), "function(t) {\n  …".

var arc = d3.arc()
    .innerRadius(50+2)
    .outerRadius(50+8)
    .startAngle(0);

// Returns a tween for a transition’s "d" attribute, transitioning any selected
// arcs from their current angle to the specified new angle.
function arcTween(newAngle) {
    return function(d) {
      var interpolate = d3.interpolate(d.endAngle, newAngle);
      return function(t) {
        d.endAngle = interpolate(t);
        return arc(d);
      };
    };
  }

// Animate to 90%
svg.selectAll('.chart1')
    .transition().duration(3000).delay(0)
    .attrTween("d", d => arcTween(radialScale(0.9)) );

// create a arc generator with start angle of 0
var arc = d3
  .arc()
  .innerRadius(50 + 2)
  .outerRadius(50 + 8)
  .startAngle(0)
  .endAngle(0);

svg
  .selectAll('.chart1')
  .transition()
  .duration(3000)
  .delay(0)
  .attrTween('d', function(d,i) {
    // for each chart 
    // create an interpolator between start angle 0
    // and end angle of d.pct
    var interpolate = d3.interpolate(0, radialScale(d.pct));

    // attrTween is expecting a function to call for every iteration of t
    // so let's return such a function
    return function(t) {
      // assign end angle to interpolated value for t
      arc.endAngle(interpolate(t));
      // call arc and return intermediate `d` value
      return arc();
    };
  });