Question

我已经使用D3JS绘制了半个圆周，并且我希望它在加载网页时开始自动绘制。我该如何实现？这是svg弧：

javascript：

<img data-expand="600" 
data-src="https://scontent.xx.fbcdn.net/v/t1.15752-9/39227322_318658432236051_
8750467176600698880_n.jpg">?_nc_cat=0&amp;_nc_ad=z-m&amp;_nc_cid=0&amp;oh=3c0b91f3
7a0809c9dace85429151986a&amp;oe=5BC5EC9F

CSS：

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

谢谢。

Answer 1

您可以通过CSS使用普通过渡或keyframes来执行此操作，也可以使用getTotalLength与getPointAtLength结合使用的javascript，其中path元素继承自SVGGraphicsElement接口。 >

对于较旧的浏览器，或者如果您在路径中有一个结束标记，则JavaScript解决方案会更好，而CSS转换则使用stroke-dasharray和stroke-dashoffset属性。

要触发绘制动作，请用窗口的onload处理程序包装函数。

查看此FIDDLE：

以上是一般解决方案。对于您的d3示例，您也可以使用圆弧补间：

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

WORKING FIDDLE。

将上述脚本包装在onload处理程序中。像 this 。

SVG D3JS动画：如何制作弧形“自画”？

1 个答案: