使用D3在圖像上繪制圓-ReactJS

Question

我是D3新手， 在Image上畫圓時遇到問題。 我有一個圖像，並且有一些形狀，我要做的就是在這些形狀上繪制圓形。

我可以使用SVG路徑和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> 

它仍然沒有顯示..我不知道我在做什么錯..

任何猜測或幫助材料將不勝感激。

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; top: 95px; left: 400px;' '上的參數樣式 style='position:absolute; top: 95px; left: 400px;' ' style='position:absolute; top: 95px; left: 400px;' '僅是為了表明要做什么的目的，這應該通過適當的CSS來完成。