Javascript 如何使用d3旋转？_Javascript_D3.js

Javascript 如何使用d3旋转？

javascript d3.js

Javascript 如何使用d3旋转？,javascript,d3.js,Javascript,D3.js,我正在为一个数学课设置一个D3演示，想要一个三角形围绕它的一个顶点旋转。当D3执行旋转指令时，三角形在正确的端点结束，但在旋转动画期间飞入和飞出视图我知道我必须调整图像，使整个旋转可见，但我不明白为什么三角形会飞走，而不是像我想的那样绕着顶点旋转。我希望三角形围绕矩形顶部水平线的中点旋转 FWIW的想法是最终将矩形转换为梯形实现轴的正确旋转语法是什么以下是整个页面： <!DOCTYPE html> <head> <meta charset="utf-8"&

我正在为一个数学课设置一个D3演示，想要一个三角形围绕它的一个顶点旋转。当D3执行旋转指令时，三角形在正确的端点结束，但在旋转动画期间飞入和飞出视图

我知道我必须调整图像，使整个旋转可见，但我不明白为什么三角形会飞走，而不是像我想的那样绕着顶点旋转。我希望三角形围绕矩形顶部水平线的中点旋转

FWIW的想法是最终将矩形转换为梯形

实现轴的正确旋转语法是什么

以下是整个页面：

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 400px }
  </style>
</head>

<body>
  <script>

    var svg = d3.select("body").append("svg");

    var data = [  
      {'x': 40, 'y': 40}, 
      {'x': 40, 'y': 100},
      {'x': 200, 'y': 100},  
      {'x': 200, 'y': 40},  
      {'x': 40, 'y': 40},

    ];

    var line = d3.svg.line()
                 .x(function(d) { return  (d['x']); })
                 .y(function(d) { return  (d['y']); });

    var path = svg.append('path').attr('d', line(data))
    .style("stroke","steelblue")
    .style("stroke-width","1px")
    .style("fill","none")

    var tdata = [  
      {'x': 120, 'y': 40}, 
      {'x': 200, 'y': 70}, 
      {'x': 200, 'y': 40}, 
      {'x': 120, 'y': 40},

      ]; 

      tpath = svg.append('path').attr('d', line(tdata))
      .style("stroke", "red")
      .style("stroke-width","1px")
      .style("fill","none")
      .transition().delay(2000)     
       .duration(1000)
       .attr("transform", "rotate(-180,120,40)");

  </script>
</body>

默认情况下，“旋转”（rotate）尝试围绕中心点0,0旋转，并插值完成此操作的变换

如果要在其他位置旋转，可以在开始旋转120,40和结束旋转-180120,40位置之间定义自己的插值：

tpath = svg.append('path').attr('d', line(tdata))
  .style("stroke", "red")
  .style("stroke-width","1px")
  .style("fill","none")
  .transition().delay(2000)     
  .duration(1000)
  .attrTween("transform", function(d,i,a){ return interp });

var interp = d3.interpolateString( "rotate(0,120,40)", "rotate(-180,120,40)" )

这已经达到了预期的效果，谢谢。但是，当原始旋转调用指定旋转中心的位置时，我不清楚为什么需要它。我得到svg旋转大约0,0。我不明白为什么d3不把细节提取出来。