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;

更新了plunker：

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

如何使用d3.js

2 个答案: