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：如何找到旋轉元素的位置？

回答

相關問題