Question

我正在使用d3.js制作SVG元素组的旋转动画。但是，我想保留一些元素的方向。例如，在this fiddle（下面的代码）中，蓝点是蓝色圆圈的中心。蓝点从黑点垂直移位，黑点围绕黄色中心旋转。我想保持这两个点之间的垂直关系。

在小提琴中，我通过将“移位”<g>组向后旋转与其封闭组向前旋转的相同量来保持垂直方向。这与cmonkey's answer here中给出的方法相同。这有效，但我想知道是否还有其他方法。有没有办法在没有反向旋转的情况下保持方向？

为什么？

反向旋转策略意味着必须小心地保持反向旋转与外部组旋转的变化同步。在这个代码的完整版本中，我在旋转（旋转内）中使用旋转，如this example中所示。这意味着总结所有外部组的旋转，以确定反向旋转应该是什么。我还想为SVG元素添加文本标签。由于不同的文本标签将属于不同数量的旋转组，因此如果我想保持文本直立，则每个文本标签都需要自己的自定义旋转。

随意建议更多D3。我只是在这些版本中手工编写了SVG，以便清楚我将如何在更高版本中动态生成带有D3的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>

在动态旋转中保持一些元素的方向？

0 个答案: