javascript - 使用 D3 在图像上绘制圆圈 - ReactJS

Question

我是 D3 新手，在在图像上绘制圆圈时遇到问题。我有一个图像和一些形状，我所要做的就是在这些形状上画圆圈。

我可以使用 SVG Paths and D3.js 分别绘制直线或圆。像这样

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
       <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="none" />
</svg> 

但不知道如何使用一些坐标在图像上绘制这些。我正在尝试这样的事情..如果我先绘制图像，然后在其上绘制圆圈，它不会显示在任何地方..

<img src="https://geology.com/world/united-states-map-with-state-names.gif"
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="none" />          
 </svg>
/>
          

如果我将 Image 放入 SVG 标签中，就像这样；

     <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
     <img src="https://geology.com/world/united-states-map-with-state-names.gif"
       <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="none" />          
       />
     </svg>
    

它仍然没有出现..我不知道我做错了什么..

任何猜测或帮助 Material 将不胜感激。

Answer 1

据我所知，两者都不应该嵌套。尝试类似的事情:

<img src="https://geology.com/world/united-states-map-with-state-names.gif" />
<svg style='position:absolute; top: 95px; left: 400px;' xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="none" />
</svg>
   

style='position:absolute; 上的参数样式顶部:95 像素；左:400px；' ' 只是为了显示要做什么的想法，这应该通过适当的 css 来完成。