我正在为数学课程设置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>
添加回答
举报
0/150
提交
取消