Javascript 如何将plotly.js应用于现有svg组<；g>；作为目标，而不是将其应用于目标<；部门>；元素？

如果我的DOM中有一个目标div，例如

<div id="graph"></div>

这将在div中创建包含svg元素的嵌套结构。 在svg元素中有一个等高线图，由一些元素表示（参见下面的DOM结构）。那很好

但是，我有一个已经存在的svg元素（使用d3.js创建），我想在我的目标svg组中包括plotly的等高线图：

<div id="myDiv">
  <svg id = "mySvgElement">
      ...
      <rect id="someExistingContent"></rect>
      ...
      <g id = "targetGroupForPlotly"></g>
  </svg>
</div>

DOM结构：

<div id="myDiv">
  <svg id = "mySvgElement">
      ...
      <rect id="someExistingContent"></rect>
      ...
      <g id = "targetGroupForPlotly"></g>
  </svg>
</div>

---

使用JQuery的复制解决方案似乎是最简单的解决方案：

Plotly.newPlot('graph', data, layout);
$('.contour').appendTo('#mySvgElement');            
$('#graph').empty();

---

您可以尝试将foreignObject标记添加到g标记并将div放入其中

...
...

Plotly.newPlot('graph', data, layout);
$('.contour').appendTo('#mySvgElement');            
$('#graph').empty();