[英]How to get SVG child element position relative to SVG position on page, D3.js?
我在SVG地圖上有一個圓形圖釘。 SVG位於div中的帶有溢出:隱藏的“位置地圖”中。 SVG尺寸大於div尺寸。
<div class="location-map">
<svg></svg>
</div>
svg.selectAll(".pin")
.data(places)
.enter().append("circle", ".pin")
.attr("r", 5)
.attr("fill", "#fff")
.attr("transform", function(d) {
return "translate(" + projection([
d.location.longitude,
d.location.latitude
]) + ")";
});
我想在SVG上獲得圓銷的位置,以便可以將SVG重新定位在div內,且負距,以使圓銷在div上水平和垂直居中顯示。
如何獲得圓銷的x,y位置?
SVGCircle具有cx
和cy
屬性,代表centerX和centerY。
d3的.attr()
方法還允許獲取這些內容。
var circle = d3.selectAll(".pin"); var x = circle.attr('cx'); var y = circle.attr('cy'); snippet.log('x: '+x); snippet.log('y: '+y)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> <div class="location-map"> <svg> <circle class="pin" cx="50" cy="50" r="25"/> </svg> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.