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

我有一堆点，我将围绕一个圆等间隔放置。我通过将它们的cx和cy属性设置为初始位置，然后迭代每个点并给它一个transform(rotate)将其移动到我想要的位置。当后面的代码我要画线到这些点d3 v4：如何找到旋转元素的位置？

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属性或其边界框，它总是引用原始转换前位置。我需要他们的后 -transform位置。显然在d3 v3中有一个可以使用的transform调用，但是在v4中这个消失了。由于我使用的是旋转而不是简单的平移，所以这比添加一些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.

来源

2017-07-05 IronWaffleMan

您可以用三角函数计算起因于旋转x和y的变化？ – anbnyc

@anbnyc可能，但我希望有一种内置的方式来代替它。 – IronWaffleMan

您可以尝试访问变换矩阵。一个建议替换为d3.transform：https://stackoverflow.com/questions/38224875/replacing-d3-transform-in-d3-v4 – anbnyc

只要你只需要找出相对<svg>元素的位置（或者，更准确地说，在nearest viewport element），您可以使用SVG界面.getCTM()。它可以让你获得变换矩阵，然后应用于cx/cy属性。

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);

<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>

来源

2017-07-05 16:32:52 ccprog

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

回答

相关问题