Question

我正在为数学课设置一个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>

Answer 1

默认情况下，rotate尝试绕着中心点(0,0)旋转，并插值实现这一点的变换。

如果您想在其他地方旋转，可以在开始rotate(0,120,40)和结束rotate(-180,120,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)" )

如何使用D3旋转？

1 个答案: