Question

我有一堆点，我以均匀的间隔围绕一个圆圈放置。我通过将cx和cy属性设置为初始位置，然后迭代每个点并给它transform(rotate)将其移动到我想要的位置来实现此目的。

var dot = dotPlaces.append("circle")
                    .attr("cx", dotOriginX )
                    .attr("cy", dotOriginY )
                    .attr("r", 20 / 2)
                    .attr("opacity", 1)
                    .attr("id", function(d) { return d.name; })
                    .attr('fill', function(d) {
                        return color(d.type);
                    })
                    .attr("transform", function(d,i) {
                        return "rotate("+ (i * (360/actualData.length)) +"," + originX + "," + originY + ")";
                    })
                    .attr("stroke", "white");

我的问题到了后来的代码中我想要画线到这些点。无论我获得cx / cy属性还是其边界框，它始终引用原始预转换位置。我需要他们的帖子 - 转换位置。显然在d3 v3中可以使用transform调用，但在第4版中，这已经消失了。由于我使用旋转而不是简单的平移，这比仅添加一些x和y偏移要简单得多。

这就是我现在使用的，供参考：

var x = svg2.select("#"+key).node().getAttribute("cx");
var y = svg2.select("#"+key).node().getAttribute("cy");
//alternatively node().getBBox(); which also fails to give post-transform position.

Answer 1

只要您只需要确定相对于<svg>元素的位置（或者，确切地说，相对于nearest viewport element），您就可以使用SVG界面.getCTM() 。它会为您提供转换矩阵，然后您可以将其应用于cx / cy属性。

＆＃13;

var circle = d3.select('circle');
var cx = circle.attr('cx');
var cy = circle.attr('cy');
var ctm = circle.node().getCTM();
var x = cx * ctm.a + cy * ctm.c + ctm.e;
var y = cx * ctm.b + cy * ctm.d + ctm.f;
d3.select('p').text(x + ',' + y);

＆＃13;

<script src="https://d3js.org/d3-selection.v1.min.js"></script>
<svg width="200" height="100">
    <circle cx="30" cy="30" r="10" transform="rotate(90 100 100)" />
</svg>
<p></p>

＆＃13;

d3 v4：如何找到旋转元素的位置？

1 个答案: