d3如何在現有的其他元素之前插入新的SVG元素？

Question

感謝this question我想我學會了如何做到這一點，但我不能完全相信我已經做好了，因爲它很醜，只要你喜歡。

假設有一個元素#foo，我想在之前創建一個SVG元素它。我真的必須這樣做：

var svg = d3.select(d3.select('#foo').node().parentNode) 
    .insert('svg', '#foo') 

我是否錯過了什麼？ （編輯：要清楚，上面的示例代碼的工作，但它是相當不透明的，包括選擇的重複。）

Answer 1

你只需要type和selector：

selection.insert(type, before) 

例如，在這個演示，這個圓圈是ID爲foo的元素。所以，

var svg2 = svg.insert("svg", "#foo"); 

在circle元素之前插入一個子SVG。

var svg = d3.select("body").append("svg") 
 
var circle = svg.append("circle").attr("id", "foo"); 
 
var svg2 = svg.insert("svg", "#foo"); 
 
svg2.attr("id", "childSVG"); 
 

 
var mySVG = (new XMLSerializer()).serializeToString(svg.node()); 
 
console.log(mySVG)

<script src="https://d3js.org/d3.v4.min.js"></script>