Javascript D3树映射更新-并非所有元素都被删除

我有一个V5D3树状图，当我点击一个框时，我希望它向下钻到下一个级别——作为不属于新层次结构的元素的一部分，应该删除。它大部分都在工作，但并非所有元素都因为某种原因被删除

在下面的例子中，如果你点击B1框，你会看到有额外的框显示

以下是一个例子：

常数数据={ 姓名：A1， 健康：0.521， 儿童：[ { 姓名：B1， 健康：0.521， 儿童：[ { 名称：B1-C1， 健康：0.614， 儿童：[ { 名称：B1-C1-D1， 健康：0.666， 儿童：[ { 名称：B1-C1-D1-E1， 数值：30， 健康：0.8 }, { 名称：B1-C1-D1-E2， 价值：35， 健康：0.5 }, { 名称：B1-C1-D1-E3， 价值：20， 健康：0.7 } ] }, { 名称：B1-C1-D2， 健康：0.45， 儿童：[ { 名称：B1-C1-D2-E1， 数值：10， 健康：0.8 }, { 名称：B1-C1-D2-E1， 价值：14， 健康：0.1 } ] }, { 名称：B1-C1-D3， 健康：0.64， 儿童：[ { 名称：B1-C1-D3-E1， 数值：10， 健康：0.8 }, { 名称：B1-C1-D3-E2， 价值：14， 健康：0.2 }, { 名称：B1-C1-D3-E3， 数值：7， 健康：0.7 }, { 名称：B1-C1-D3-E4， 数值：9， 健康：0.9 }, { 名称：B1-C1-D3-E5， 数值：5， 健康：0.6 } ] }, {名称：B1-C1-D4， 价值：2， 健康：0.7 } ] }, { 名称：B1-C2， 健康：0.45， 儿童：[ {名称：B1-C2-D1， 健康：0.45， 值：12} ] }, { 名称：B1-C3， 健康：0.5， 儿童：[ {名称：B1-C3-D1， 健康：0.5， 值：10} ] } ] } ] } const treemapLayout=d3.treemap .尺寸[500300] .填充器16； 设t=d3.transition.duration1500 //更新视图 让update=d=>{ console.logd 设rootNode=d3.hierarchyd 根节点 萨姆德先生{ 返回d值； } .sortfunctiona，b{ 返回b.height-a.height | | b.value-a.value； }; //console.logrootNode treemapLayoutrootNode； 让节点=d3。选择“svg” .选择全部“g” .datarootNode.com 节点 出口 .attrfill不透明度，1 .transitiont .attrfill不透明度，0 去除 节点=节点 进来 .附加“g” .合并节点 .过滤器功能正常{ 返回d.depth<4； } .attr'transform'，函数d{ 返回“translate”+[d.x0，d.y0]+ } 节点 .append'rect' .attr'width'，函数d{ 返回d.x1-d.x0； } .attr'height'，函数d{ 返回d.y1-d.y0； } .attr'style'，函数d{ 返回“fill:”+d3.interpolterdygnd.data.health } .单击，功能正常{ 最新数据； } .transitiont 节点 .append'text' .attr'dx'，4 .attr'dy'，14岁 .textfunctiond{ 返回d.data.name； } }; 更新数据； 直肠{ 填充：卡德蓝； 不透明度：1； 笔画：白色； } 正文{ 字体系列：Helvetica Neue，Helvetica，无衬线； 填充：4848； 字体大小：10px； 溢出x：隐藏； 溢出y：隐藏； }

---

该实现的问题在于，在您的案例中，您没有使用唯一标识符（如id或名称）来标识节点

更改代码以查看下面的代码将允许D3在合并时正确识别实际节点

  let nodes = d3.select('svg')
      .selectAll('g')
      .data(rootNode.descendants(), d => d ? d.name : 'root')

---

只是关于这一点的一些附加细节——看起来没有被删除的节点是新根节点的以前的父节点和祖父母节点。