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

Question

我想知道如何获取圆的中心点以动态放置标记。 在我的真实项目中，我的圆可以在svg内的任意位置，并且我必须定位我的标记，以便其下端位于圆的中心。

我怎样才能做到这一点？

  <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

Answer 1

首先， 命名您的选择：

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

然后，使用这些坐标来设置x和y位置：

.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

Answer 2

令cx代表圆的x位置， cy代表圆的y位置， mw表示标记的宽度，公式为：

markerX = cx - mw / 2;
markerY = cy - mw;

更新的插件 ：

var cx = 100,
  cy = 200;

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

var mw = 50;
var img = svg.append("svg:image")
  .attr("xlink:href", "marker.svg")
  .attr("width", mw)
  .attr("height", mw)
  .attr("x", cx - mw / 2)
  .attr("y", cy - mw);