如何在D3.js页面上获取SVG子元素相对于SVG位置的位置？
如何在D3.js页面上获取SVG子元素相对于SVG位置的位置？
提问于 2015-10-01 11:49:28
我在SVG地图上有一个圆形别针。SVG在一个带有overflow:hidden的div "location-map“中。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上得到圆针的位置，这样我就可以在div中用负边距重新定位SVG，使圆针在div上水平和垂直居中显示。
如何获得圆销的x，y位置？
回答 1
Stack Overflow用户
发布于 2015-10-01 12:35:54
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32879128
复制相关文章
相似问题
腾讯云开发者
