D3沿路径为任意svg设置动画

时间：2019-02-20 16:56:47

标签： d3.js svg

我正在尝试在http://bl.ocks.org/JMStewart/6455921上修改d3动画示例

!DOCTYPE html>
<html>
<head>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
    <script>
        var svg = d3.select("body").append("svg")
                    .attr("width", 500)
                        .attr("height", 500);

        var line = d3.svg.diagonal();

        var lineData = {source:{x:25, y:25},
                        target:{x:400, y:400}};

        var path = svg.append("path")
            .attr("d", line(lineData))
            .style("stroke", "black")
            .style("fill", "none");

        svg.append("circle")
            .attr("cx", 25) //Starting x
            .attr("cy", 25) //Starting y
            .attr("r", 25)
            .transition()
            .delay(250)
            .duration(1000)
            .ease("linear")
            .tween("pathTween", function(){return pathTween(path)})
            // .tween("pathTween", pathTween); //Custom tween to set the cx and cy attributes

        function pathTween(path){
            var length = path.node().getTotalLength(); // Get the length of the path
            var r = d3.interpolate(0, length); //Set up interpolation from 0 to the path length
            return function(t){
                var point = path.node().getPointAtLength(r(t)); // Get the next point along the path
                d3.select(this) // Select the circle
                    .attr("cx", point.x) // Set the cx
                    .attr("cy", point.y) // Set the cy
            }
        }
    </script>
</body>
</html>

我想做的是用有效的SVG线段替换动画中的圆，并沿路径对其进行动画处理。这就是我的代码。我可以附加一个人的svg图像，但无法为该圈子添加动画。我想念什么？

<!DOCTYPE html>
<html>
<head>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
    <script>
        var svg = d3.select("body").append("svg")
                    .attr("width", 500)
                        .attr("height", 500);

        var line = d3.svg.diagonal();

        var lineData = {source:{x:25, y:25},
                        target:{x:400, y:400}};

    var person = `
      <g transform="scale(.4 .4)">
        <g>
          <path d="M40.84,0.14 C36.68,0.82 33.28,3.92 32.24,7.99 C30.99,12.84 33.29,17.87 37.77,20.09 C39.42,20.91 40.54,21.15 42.55,21.14 C43.94,21.13 44.28,21.1 45.12,20.87 C48.75,19.9 51.61,17.13 52.64,13.59 C53.39,10.99 53.15,8.39 51.95,5.95 C50.56,3.14 48.08,1.12 45.05,0.34 C43.82,0.03 42.04,-0.06 40.84,0.14 z" fill="#000000"/>
          <path d="M37.65,23.45 C36.16,23.69 34.56,24.31 33.22,25.17 C32.48,25.63 11.89,42.32 11.2,43 C10.6,43.59 10.21,44.21 9.96,44.97 C9.74,45.67 5.22,66.05 5.14,66.7 C5.06,67.42 5.29,68.5 5.7,69.3 C6.57,71.02 8.63,72.08 10.53,71.79 C11.44,71.65 12.48,71.11 13.19,70.39 C14.1,69.48 14.41,68.76 14.96,66.3 C15.51,63.8 18.47,50.32 18.52,50.07 C18.54,49.94 25.9,43.87 25.97,43.93 C25.98,43.94 23.43,55.27 20.3,69.11 L14.62,94.27 L7.77,105.77 C4,112.1 0.8,117.54 0.67,117.86 C-0.24,120.04 -0.21,121.98 0.76,123.99 C1.14,124.77 1.36,125.07 2.08,125.8 C3.07,126.79 3.94,127.32 5.12,127.67 C7.62,128.39 10.09,127.8 12.01,126.03 C12.34,125.72 12.81,125.19 13.04,124.86 C13.85,123.72 28.21,99.4 28.8,98.17 L29.39,96.95 L31.17,88.72 C32.14,84.2 32.97,80.51 33.01,80.52 C33.13,80.58 48.3,97.21 48.3,97.29 C48.3,97.45 52.89,121.54 53.06,122.25 C53.64,124.78 55.56,126.91 57.94,127.66 C61.24,128.7 64.9,127.16 66.46,124.08 C67.17,122.68 67.39,120.84 67.06,119.09 C66.98,118.68 66.61,116.76 66.25,114.84 C65.89,112.92 65.1,108.76 64.5,105.6 C63.9,102.44 63.11,98.27 62.75,96.35 C62.1,92.9 61.8,91.73 61.41,91.09 C61.3,90.91 56.99,85.77 51.83,79.67 C46.67,73.58 42.46,68.53 42.47,68.47 C42.55,68.03 47.22,47.54 47.25,47.51 C47.27,47.49 48.21,49.32 49.33,51.57 C50.91,54.72 51.48,55.77 51.84,56.17 C52.41,56.8 67.96,67.56 68.95,68.01 C70.84,68.86 72.94,68.47 74.34,67.01 C76.07,65.19 76.13,62.38 74.47,60.54 C74.16,60.19 71.78,58.5 66.62,54.94 L59.22,49.85 L57.77,46.95 C51.34,34.17 48.46,28.54 48.11,28.07 C45.54,24.58 41.55,22.82 37.65,23.45 z" fill="#000000"/>
        </g>
      </g>`

        var path = svg.append("path")
            .attr("d", line(lineData))
            .style("stroke", "black")
            .style("fill", "none");

        svg.append('g').attr('id','person').html(person)
            .attr("cx", 25) //Starting x
            .attr("cy", 25) //Starting y
            .attr("r", 25)
            .transition()
            .delay(250)
            .duration(1000)
            .ease("linear")
            .tween("pathTween", function(){return pathTween(path)})
            // .tween("pathTween", pathTween); //Custom tween to set the cx and cy attributes

        function pathTween(path){
            var length = path.node().getTotalLength(); // Get the length of the path
            var r = d3.interpolate(0, length); //Set up interpolation from 0 to the path length
            return function(t){
                var point = path.node().getPointAtLength(r(t)); // Get the next point along the path
                d3.select(this) // Select the circle
                    .attr("cx", point.x) // Set the cx
                    .attr("cy", point.y) // Set the cy
            }
        }
    </script>
</body>
</html>

2 个答案:

答案 0 :(得分：1)

cx和cy是仅对圆有效的属性。要为组设置动画，请使用带有transform值的translate(x,y)属性。有关此处的转换的更多信息：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform

答案 1 :(得分：1)

您可以使用person元素定义<svg>-它们可以嵌套，并且可以使用x和y属性进行定位：

var person = `
    <g transform="scale(.4 .4)">
      <path d="M40.84,0.14 C36.68,0.82 33.28,3.92 32.24,7.99 C30.99,12.84 33.29,17.87 37.77,20.09 C39.42,20.91 40.54,21.15 42.55,21.14 C43.94,21.13 44.28,21.1 45.12,20.87 C48.75,19.9 51.61,17.13 52.64,13.59 C53.39,10.99 53.15,8.39 51.95,5.95 C50.56,3.14 48.08,1.12 45.05,0.34 C43.82,0.03 42.04,-0.06 40.84,0.14 z" fill="#000000"/>
      <path d="M37.65,23.45 C36.16,23.69 34.56,24.31 33.22,25.17 C32.48,25.63 11.89,42.32 11.2,43 C10.6,43.59 10.21,44.21 9.96,44.97 C9.74,45.67 5.22,66.05 5.14,66.7 C5.06,67.42 5.29,68.5 5.7,69.3 C6.57,71.02 8.63,72.08 10.53,71.79 C11.44,71.65 12.48,71.11 13.19,70.39 C14.1,69.48 14.41,68.76 14.96,66.3 C15.51,63.8 18.47,50.32 18.52,50.07 C18.54,49.94 25.9,43.87 25.97,43.93 C25.98,43.94 23.43,55.27 20.3,69.11 L14.62,94.27 L7.77,105.77 C4,112.1 0.8,117.54 0.67,117.86 C-0.24,120.04 -0.21,121.98 0.76,123.99 C1.14,124.77 1.36,125.07 2.08,125.8 C3.07,126.79 3.94,127.32 5.12,127.67 C7.62,128.39 10.09,127.8 12.01,126.03 C12.34,125.72 12.81,125.19 13.04,124.86 C13.85,123.72 28.21,99.4 28.8,98.17 L29.39,96.95 L31.17,88.72 C32.14,84.2 32.97,80.51 33.01,80.52 C33.13,80.58 48.3,97.21 48.3,97.29 C48.3,97.45 52.89,121.54 53.06,122.25 C53.64,124.78 55.56,126.91 57.94,127.66 C61.24,128.7 64.9,127.16 66.46,124.08 C67.17,122.68 67.39,120.84 67.06,119.09 C66.98,118.68 66.61,116.76 66.25,114.84 C65.89,112.92 65.1,108.76 64.5,105.6 C63.9,102.44 63.11,98.27 62.75,96.35 C62.1,92.9 61.8,91.73 61.41,91.09 C61.3,90.91 56.99,85.77 51.83,79.67 C46.67,73.58 42.46,68.53 42.47,68.47 C42.55,68.03 47.22,47.54 47.25,47.51 C47.27,47.49 48.21,49.32 49.33,51.57 C50.91,54.72 51.48,55.77 51.84,56.17 C52.41,56.8 67.96,67.56 68.95,68.01 C70.84,68.86 72.94,68.47 74.34,67.01 C76.07,65.19 76.13,62.38 74.47,60.54 C74.16,60.19 71.78,58.5 66.62,54.94 L59.22,49.85 L57.77,46.95 C51.34,34.17 48.46,28.54 48.11,28.07 C45.54,24.58 41.55,22.82 37.65,23.45 z" fill="#000000"/>
    </g>`

....

    svg.append('svg').attr('id','person').html(person)
        .attr("x", 25) //Starting x, left side
        .attr("y", 25) //Starting y, top side
        .transition()

        ....
相关问题
最新问题