d3.js正在降低性能

Question

下面提到的片段正在降低性能。我无法找到更好的。它用于显示表及其子行。 有人可以帮助我优化这个片段以便更好地使用。

提前谢谢

        childRow.transition()
                                .duration(duration)
                                .attr("transform", function(d) {
                                    //on transitions when clicked the child 
        rows are recalculated and placed accordingly on page
                                    childRow.selectAll('rect').remove();
                                    childRow.selectAll('text').remove();
                                    for(var childRectCount = 0; childRectCount < configDataCopy.details.length; childRectCount++)
                                    {
                                        childRow.append("rect")
                                                .attr("height", rowHeight)
                                                .attr("width", rectWidth)
                                                .attr("id", function(d){ return "a" + d.key;})
                                                .attr("x", (childRectCount * rectWidth))
                                                .attr("class", function(d){
                                                    return d.zebra === true ? "wl-widget-row-not-striped" : "wl-widget-row-striped";
                                                });

                                        childRow.append("text")
                                                .attr("dy", dy)
                                                .attr("dx", function(d){
                                                    return childRectCount === 0 ? (childRectCount * rectWidth) + firstColumnPadding : (childRectCount*rectWidth);
                                                })
                                                .text(function(d) {
                                                    return d[configDataCopy.details[childRectCount].key];
                                                });
                                    }
                                    return "translate(" + d.x + "," + d.y + ")";
                                })
                                .style("opacity", 1);

Answer 1

使用ENTER / UPDATE / EXIT模式，而不是删除所有元素并重新添加它们。