Javascript D3-平滑径向图表过渡动画

我准备了D3径向图组件来显示某个目标的百分比值。这将是伟大的添加平滑过渡效果时，开始绘制前景圈从0到百分比（如70%）

问题是-如何使用下面随附的代码准备过渡/延迟/持续时间效果

我还想实现的第二个想法是使用从0到chartValue的动画计算圆内的值（径向内容）。如何制备这种溶液

谢谢大家!

const chart百分比=70；
常数chartValue=1.1242
常数半径=75；
常数边界=7；
常数填充=0；
常数宽度=400；
常数高度=400；
常数twoPi=Math.PI*2；
const boxSize=（半径+填充）*2；
让svg；
函数setArc（）{
返回d3.arc（）
.startAngle（0）
.内半径（半径）
.外部（半径-边界）
.转弯半径（50）；
}
函数绘图（）{
svg=d3。选择（“.chart”）。追加（“svg”）
.attr（'width'，width）
.attr（'高度'），高度；
svg.append（“foreignObject”）
.attr（“宽度”，盒子大小）
.attr（“高度”，盒子大小）
.append（“xhtml:div”）
.attr（'class'，'radial wrapper'）
.html（`${chartValue}`）；
const field=svg.append（'g'）
.attr（'transform'，'translate（'+boxSize/2+'，'+boxSize/2+'））；
常数表=字段。追加（'g'）
.attr（“类别”、“进度表”）；
const background=meter.append（“路径”）
.datum（{endAngle:twoPi}）
.attr（'class'，'background'）
.attr（'fill'，'2D2F'）
.attr（'fill-opacity'，0.1）
.attr（“d”，setArc（））；
const front=meter.append（“路径”）
.基准面（{端角：（图表百分比/100）*twoPi}）
.attr（'类'，'前景'）
.attr（'fill'，'red'）
.attr（'fill-opacity'，1）
.attr（'d'，setArc（））；
}
draw（）
body{margin:30px；位置：固定；顶部：0；右侧：0；底部：0；左侧：0；}
.radial wrapper{显示：柔性；对齐项目：中心；对齐内容：中心；宽度：100%；高度：100%；}

为属性tween创建一个函数

function arcTween(a) {
  var j = {"endAngle":0};//start angle
  var i = d3.interpolateObject(j, a);
  return function(t) {
    d3.select(".radial-content").text(d3.format(".4n")(chartValue*t));
    return arc(i(t));
  };
}

在上述函数中

d3.select(".radial-content").text(d3.format(".4n")(chartValue*t));

这将在转换运行时更改径向内容中的文本（并以格式输出）

现在将tween函数添加到前景路径

  const foreground = meter.append("path")
    .datum({
      endAngle: (chartPercentage / 100) * twoPi
    })
    .attr('class', 'foreground')
    .attr('fill', 'red')
    .attr('fill-opacity', 1)
  .transition().duration(750).attrTween("d", arcTween);

工作代码
我重写了您的代码。当需要为某些属性设置动画时，应该使用
attrTween
而不是
attr
方法


const chart百分比=70；
常数chartValue=1.1242
常数半径=75；
常数边界=7；
常数填充=0；
常数宽度=400；
常数高度=400；
常数twoPi=Math.PI*2；
const boxSize=（半径+填充）*2；
让svg；
const setArc=d3.arc（）
.startAngle（0）
.内半径（半径）
.外部（半径-边界）
.转弯半径（50）；
常量arcParams={}；
函数绘图（）{
svg=d3。选择（“.chart”）。追加（“svg”）
.attr（'width'，width）
.attr（'高度'），高度；
svg.append（“foreignObject”）
.attr（“宽度”，盒子大小）
.attr（“高度”，盒子大小）
.append（“xhtml:div”）
.attr（'class'，'radial wrapper'）
.html（``）；
const field=svg.append（'g'）
.attr（'transform'，'translate（'+boxSize/2+'，'+boxSize/2+'））；
常数表=字段。追加（'g'）
.attr（“类别”、“进度表”）；
常数背景=米
.append（“路径”）
.attr（'class'，'background'）
.attr（'fill'，'2D2F'）
.attr（'fill-opacity'，0.1）
.attr（“d”，setArc（{endAngle:twoPi}））；
常量前景=米
.append（“路径”）
.transition（）
.轻松（d3.轻松反弹）
.持续时间（1500）
.attr（'类'，'前景'）
.attr（'fill'，'red'）
.attr（'fill-opacity'，1）
.attrTween（“d”，函数（）{
返回弧间（{endAngle:0}，chartPercentage/100）
})
}
函数arcTween（d，新的_分数）{
var new_startAngle=0
var new_endAngle=new_startAngle+new_分数*2*Math.PI
var interpolate_start=d3.interpolate（d.startAngle，new_startAngle）
var interpolate_end=d3.interpolate（d.endAngle，new_endAngle）
返回函数（t）{
d、 endAngle=插值_端（t）
d3.选择（“.径向内容”）
.text（（d.endAngle/new_endAngle*chartValue）.toFixed（4））；
返回设置弧（d）
}
}
draw（）
正文{
利润率：30像素；
位置：固定；
排名：0；
右：0；
底部：0；
左：0；
}
.径向护套{
显示器：flex；
对齐项目：居中；
证明内容：中心；
宽度：100%；
身高：100%；
}