寻找一种更有效的方法来删除d3元素

Question

我刚刚开始学习D3并且无法理解如何操作选择。我的可视化功能非常缓慢，有人建议我使用时间轴来查找问题的根源。我查看了它，发现这段代码很可能是罪魁祸首：

for (var i = 0; i < staticSvgLength; i++) {
    var curritem = d3.select(svgChildren[0][i]);
    if (curritem.attr("class") != "graphbutton") {
        curritem.remove();
    }
}

以下是时间轴的快照，告诉我问题是删除：

svgChildren个元素的选择使用：

var svgChildren = d3.selectAll(svgContainer[0][0].childNodes);

有数千个元素，其中大部分可以在以下变量中找到：

var rectangles = svgContainer.selectAll("svg")
    .data(rawDataStore)
    .enter()
    .append("rect")

这是我想要创建的图表：

我试图阻止删除的元素是左上角的按钮，这些按钮也存储在svgContainer中。作为一个附带问题，将按钮存储在我存储主图的同一svg元素中是不好的做法吗？

编辑：我在这里定义svgContainer：

var svgContainer = d3.select("body").append("svg")
    .attr("Call", "svgContainer")
    .attr("height", max_y)
    .attr("width", max_x)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + (margin.top) + ")");

我选择要删除的所有SVG，因为当您点击按钮时，它会切换到不同的图表。我不希望删除这两个按钮，只删除图表，所以我试图通过给他们一个类来排除它们，然后删除svgContainer中除了包含按钮的项目之外的所有元素类。