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

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");

在圆形元素之前插入子 SVG。

selection.insert(type, before)

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