如何使用D3旋轉？

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 個解決方案

解決方案1
1 已采納 2019-05-10 17:31:44

如何使用D3旋轉？

問題描述

1 個解決方案

解決方案1 1 已采納 2019-05-10 17:31:44

解決方案1
1 已采納 2019-05-10 17:31:44