Fatal编程技术网
  • d3.js/
  • D3.js D3沿路径设置任意svg的动画

D3.js D3沿路径设置任意svg的动画

d3.js svg

D3.js D3沿路径设置任意svg的动画,d3.js,svg,D3.js,Svg,我正在尝试修改一个d3动画示例 ！DOCTYPE html> var svg=d3.选择（“正文”）.追加（“svg”） .attr（“宽度”，500） .attr（“高度”，500）； var line=d3.svg.diagonal（）； var lineData={source:{x:25，y:25}， 目标：{x:400，y:400}； var path=svg.append（“路径”） .attr（“d”，行（行数据）） .style（“笔划”、“黑色”） .样式（“填充”、“无”）；

我正在尝试修改一个d3动画示例

！DOCTYPE html>
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，500）
.attr（“高度”，500）；
var line=d3.svg.diagonal（）；
var lineData={source:{x:25，y:25}，
目标：{x:400，y:400}；
var path=svg.append（“路径”）
.attr（“d”，行（行数据））
.style（“笔划”、“黑色”）
.样式（“填充”、“无”）；
svg.append（“圆”）
.attr（“cx”，25）//从x开始
.attr（“cy”，25）//开始y
.attr（“r”，25）
.transition（）
.延迟（250）
.持续时间（1000）
.ease（“线性”）
.tween（“pathTween”，function（）{return pathTween（path）}）
//.tween（“pathTween”，pathTween）//自定义tween以设置cx和cy属性
函数pathTween（路径）{
var length=path.node（）.getTotalLength（）；//获取路径的长度
var r=d3.插值（0，长度）；//设置从0到路径长度的插值
返回函数（t）{
var point=path.node（）.getPointAtLength（r（t））；//获取路径上的下一个点
d3.选择（这个）//选择圆
.attr（“cx”，point.x）//设置cx
.attr（“cy”，point.y）//设置cy
}
}
我想做的是用有效的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>


var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，500）
.attr（“高度”，500）；
var line=d3.svg.diagonal（）；
var lineData={source:{x:25，y:25}，
目标：{x:400，y:400}；
个人变量=`
`
var path=svg.append（“路径”）
.attr（“d”，行（行数据））
.style（“笔划”、“黑色”）
.样式（“填充”、“无”）；
svg.append（'g'）.attr（'id'，'person'）.html（person）
.attr（“cx”，25）//从x开始
.attr（“cy”，25）//开始y
.attr（“r”，25）
.transition（）
.延迟（250）
.持续时间（1000）
.ease（“线性”）
.tween（“pathTween”，function（）{return pathTween（path）}）
//.tween（“pathTween”，pathTween）//自定义tween以设置cx和cy属性
函数pathTween（路径）{
var length=path.node（）.getTotalLength（）；//获取路径的长度
var r=d3.插值（0，长度）；//设置从0到路径长度的插值
返回函数（t）{
var point=path.node（）.getPointAtLength（r（t））；//获取路径上的下一个点
d3.选择（这个）//选择圆
.attr（“cx”，point.x）//设置cx
.attr（“cy”，point.y）//设置cy
}
}

cx
和
cy
是仅对圆有效的属性。要设置组的动画，请将
transform
属性与
translate（x，y）
值一起使用。有关转换的更多信息：

cx
和
cy
是仅对圆有效的属性。要设置组的动画，请将
transform
属性与
translate（x，y）
值一起使用。关于转换的更多信息：

您可以使用
元素定义您的
人
——它们可以嵌套，您可以使用
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()

        ....

var-person=`
`
....
append（'svg'）.attr（'id'，'person'）.html（person）
.attr（“x”，25）//开始x，左侧
.attr（“y”，25）//从y开始，顶部
.transition（）
....
您可以使用
元素定义您的
人
——它们可以嵌套，您可以使用
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()

        ....

var-person=`
`
....
append（'svg'）.attr（'id'，'person'）.html（person）
.attr（“x”，25）//开始x，左侧
.attr（“y”，25）//从y开始，顶部
.transition（）
....
就是这样。非常感谢。pathTween函数中的动画操作需要如下所示：“d3.select（this.attr（'transform'，'translate（'+point.x+'，'+point.y+'））”）”就是这样。非常感谢。pathTween函数中的动画操作需要如下所示：“d3.select（this.attr（'transform'，'translate（'+point.x+'，'+point.y+'））”