Svg 在动态旋转中保持某些元素的方向？
我正在使用d3.js为SVG元素组的旋转设置动画。但是，我希望保留某些元素的方向。例如，在下面的代码中，蓝点是蓝色圆圈的中心。蓝点从围绕黄色中心旋转的黑点垂直移动。我想保持这两点之间的垂直关系 在小提琴中，我通过向后旋转移位组来保持垂直方向，其旋转量与其封闭组向前旋转的量相同。这与中给出的方法相同。这是可行的，但我想知道是否还有其他方法。有没有办法在没有反向旋转的情况下保持方向 为什么? 反向旋转策略意味着必须小心地保持反向旋转与外部组旋转的变化同步。在这段代码的完整版本中，我在旋转中使用旋转，如中所示。这意味着将所有外部组的旋转相加，以确定逆旋转应该是什么。我还想向SVG元素添加文本标签。由于不同的文本标签属于不同数量的旋转组，如果我想保持文本直立，每个文本标签都需要自己的自定义旋转 请随意推荐更多D3。我只是在这些版本中手工编码SVG，以便清楚地了解在更高版本中如何使用D3动态生成SVGSvg 在动态旋转中保持某些元素的方向？,svg,d3.js,Svg,D3.js,我正在使用d3.js为SVG元素组的旋转设置动画。但是，我希望保留某些元素的方向。例如，在下面的代码中，蓝点是蓝色圆圈的中心。蓝点从围绕黄色中心旋转的黑点垂直移动。我想保持这两点之间的垂直关系 在小提琴中，我通过向后旋转移位组来保持垂直方向，其旋转量与其封闭组向前旋转的量相同。这与中给出的方法相同。这是可行的，但我想知道是否还有其他方法。有没有办法在没有反向旋转的情况下保持方向 为什么? 反向旋转策略意味着必须小心地保持反向旋转与外部组旋转的变化同步。在这段代码的完整版本中，我在旋转中使用旋转，
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
.cycle {
stroke : #000000;
fill : none;
}
.movingPointOnCycle {
stroke : #000000;
fill : #000000;
}
#pointB {
stroke : #0000FF;
fill : #0000FF;
}
#epicycle2 {
stroke : #0000FF;
}
.centerOfUniverse {
stroke : #000000;
fill : #000000;
}
.sun {
stroke : #000000;
fill : #F0F000;
}
.mars {
stroke : #000000;
fill : #A00000;
}
.earth {
stroke : #000000;
fill : #00A000;
}
</style>
</head>
<body>
<svg width="400" height="400">
<g transform="translate(200,200) scale(1.3)">
<circle class="sun" r="10"></circle>
<g class="cycle"speed="0.01">
<circle id="deferent" class="cycle" r="60"></circle>
<g class="epicycleCenter" transform="translate(60,0)">
<circle id="pointD" class="movingPointOnCycle" r="2"></circle>
<g class="shift" speed="-0.01" displacement="-25">
<circle id="pointB" class="movingPointOnCycle" r="2"></circle>
<line x1="0" y1="0" x2="0" y2="25" stroke-dasharray="1,2"></line>
<g class="cycle"speed="0.01">
<circle id="epicycle2" class="cycle" r="75"></circle>
</g>
</g>
</g>
</g>
</g>
</svg>
<script type="text/javascript">
var t0 = Date.now();
var svg = d3.select("svg");
d3.timer(function() {
var delta = (Date.now() - t0);
svg.selectAll(".cycle").attr("transform", function(d) {
return "rotate(" + delta * d3.select(this).attr("speed") + ")";
});
svg.selectAll(".shift").attr("transform", function(d) {
return "rotate(" + delta * d3.select(this).attr("speed") + ")"
+
"translate(0," + d3.select(this).attr("displacement") + ")"
;
});
});
</script>
</body>
</html>
对于，使用sin和cos函数并将文本移动到该位置。数学可以扩展到双旋转，但是我的例子是手工编码的而不是D3。谢谢@AlvinK。这是另一种选择。这听起来是一个不使用D3的好解决方案。我认为这相当于使用SVG旋转函数。我真正想说的是，继续旋转这个物体的位置，但保持它在自己的小世界里，保持它原来的方向。这样我就不必像我所做的那样记录和总结不同的旋转常数。类比：3个或更多的齿轮串联在一起，第一个齿轮旋转。在最后一个齿轮上拾取一个齿并贴上标签。无论旋转如何，此标签都必须竖直。在现实世界中，我会在标签上加一个砝码，这样重力就会把它拉直。有人能编写SVG等价物吗？很好的类比。我开始怀疑d3.js force布局是否可以实现一些技巧。可以锚定布局，我认为可能存在一些参数设置，这些设置可能会导致标签上的一个点向上或向下拉，而不会导致标签在图形旋转时反弹。弹跳会分散注意力。如果用这个技巧来确定某个目标的方向，使其发生更多的旋转，这将有点不令人满意，但如果它奏效的话……嗯。或者取一个独立于旋转对象的点，让标签计算它与该点的关系。然后使用该值确定必须撤消多少旋转，以保持标签或其垂直。这就是trig功能派上用场的地方，这种策略避免了跟踪所有干涉旋转，但似乎比使用力布局更干净。