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

Question

感谢this question我想我已经学会了如何做到这一点，但我不太相信我已经做对了，因为它很丑，正如你喜欢的那样。

假设有一个元素 #foo，我想在它之前创建一个 SVG 元素。我真的必须这样做吗:

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

我错过了什么吗？ (编辑:要明确的是，上面的示例代码确实有效，但它非常不透明并且包含选择器的重复。)

Answer 1

您只需要类型和选择器:

selection.insert(type, before)

例如，在此演示中，圆圈是 ID 为 foo 的元素。所以，

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

在圆形元素之前插入子 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>