gpt4 book ai didi

javascript - 如何使用 d3.js 获取圆心的坐标

转载 作者:行者123 更新时间:2023-11-29 18:56:02 25 4
gpt4 key购买 nike

我想知道如何获取圆的中心点以动态放置我的标记。在我的真实项目中,我的圆圈可以在 svg 中的随机位置,我必须找到我的标记,以便它的底部尖端位于圆圈的中心。

enter image description here

我该怎么做?

  <body>

<script type="text/javascript">

const svg = d3.select("body").append("svg").attr("width",1000).attr("height",1000);

svg.append("circle").attr("r",5).attr("cx",100).attr("cy",200).style("stroke","#FF0000");

var widthMarker=50;
var img = svg.append("svg:image")
.attr("xlink:href", "marker.svg")
.attr("width", widthMarker)
.attr("height", widthMarker)
.attr("x", 228)
.attr("y",53)


</script>
</body>

http://plnkr.co/edit/vFtJkZ1GKmyGYIUR0wXR?p=preview

最佳答案

首先,命名您的选择:

var circle = svg.append("circle")
.attr("r", 5)
.attr("cx", 100)
.attr("cy", 200)
.style("stroke", "#FF0000");

话虽这么说,回到你的问题:

首先,使用getBBox()获取圆的坐标(前提是没有没有翻译),假设你不知道,不管什么原因,它位置(即既不是它的 cx 也不是它的 cy 值):

var circleBox = circle.node().getBBox();

然后,使用这些坐标设置xy 位置:

.attr("x", circleBox.x + circleBox.width/2 - widthMarker/2)
.attr("y",circleBox.y + circleBox.height/2 - widthMarker)

这是更新的 Plunker:http://plnkr.co/edit/DYlJsUhrF1OgoChq927L?p=preview

关于javascript - 如何使用 d3.js 获取圆心的坐标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49524927/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com