javascript - 如何将现有的 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()方法非常相似。（使用带有 SVG 元素的 jQuery 永远不会结束）

好消息是，使用内置的 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);