如何将现有D3 SVG图表添加回DOM？

Question

嗨，有一个D3 SVG对象：

 d3.select("#chart").append("svg")
.attr('id', 'chartId' + idx)

我在其上附加了矩形以创建条形图。

我希望能够从DOM中添加和删除它。

我可以使用以下方法轻松删除它：

d3.select('svg#chartId' + j).remove();

如何重新添加刚刚删除的整个SVG图表？

Answer 1

D3不支持重新附加已删除的节点。

selection.remove()并没有完全破坏节点，它的行为与jQuery的detach()方法非常相似。 （将jQuery与SVG元素一起使用永远不会成功）

好消息是，使用内置的SVG DOM，这非常容易。

// .remove() returns the detached node.
var el = d3.select('.selection').remove();
var nativeEl = el[0][0];
nativeEl.parentNode.appendChild(nativeEl);

通常，显示和隐藏这些元素可能会更容易，但是在诸如渲染后重新排列元素顺序的情况下，这可能会非常有用。

Answer 2

使用detach()而不是remove()

var refToElelment = $(d3.select('svg#chartId' + j)).detach();

要么

$('#chartId' + j).detach()

后来..

$('#target').append(refToElelment);