D3.js SVG D3JS动画：如何制作圆弧；“自绘制”吗；？

我已经画了半个圆周使用D3JS，我想它开始自我绘制网页时加载。我怎样才能做到这一点？这是svg弧：

javascript:

var width = 960,
    height = 500;
var svg = d3.select("body").append("svg")
    .attr("width",width)
    .attr("height",height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var path = svg.append("path")
    .attr("d", d3.svg.arc()
    .innerRadius(height / 4)
    .outerRadius(height / 3)
    .startAngle(0)
    .endAngle(Math.PI));

CSS:

---

谢谢。

您可以通过css使用普通转换或

关键帧来实现这一点，或者通过javascript使用
getTotalLength
结合
getPointAtLength
来实现，其中path元素继承自
SVGGraphicsElement
接口

对于较旧的浏览器或如果路径中有结束标记，javascript解决方案会更好，另一方面，css转换使用
stroke-dasharray
和
stroke-dashoffset
属性

要触发绘图操作，请使用窗口的
onload
处理程序包装函数

见此：

以上是一个普遍的解决方案。对于您的d3示例，您也可以使用arc tweens：

var width = 960,
    height = 500;
var svg = d3.select("body").append("svg")
    .attr("width",width)
    .attr("height",height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var path = svg.append("path")
        .transition()
    .attrTween("d",function(){
      var _f = d3.svg.arc().innerRadius(height / 4).outerRadius(height / 3).startAngle(0);
      var interpolator = d3.interpolateNumber(0,Math.PI);
      return function(t){
        return (_f.endAngle(interpolator(t))())
      }
    })
    .duration(2000);


将上述脚本包装在
onload
处理程序中。像
一样，设置笔划数组属性的动画
var width = 960,
    height = 500;
var svg = d3.select("body").append("svg")
    .attr("width",width)
    .attr("height",height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var path = svg.append("path")
        .transition()
    .attrTween("d",function(){
      var _f = d3.svg.arc().innerRadius(height / 4).outerRadius(height / 3).startAngle(0);
      var interpolator = d3.interpolateNumber(0,Math.PI);
      return function(t){
        return (_f.endAngle(interpolator(t))())
      }
    })
    .duration(2000);