Javascript d3.js自定义布局出口（）不工作

我想构建一个类似Windows资源管理器的分层可视化。由于我想手动计算x和y坐标，我根据这里描述的第一个示例创建了一个自定义布局：

我的布局函数如下所示：

函数myTreeLayoutdata{ var nodes=[]；//或根据布局直接重用数据 //加载所有节点及其子节点： var coreelement=数据； corelement.x=0； corelement.y=0； 元素，0； //nodes.pushcoreelement；//核心元素 函数子递归元素{ 节点.单元； if元素.children！=null{ element.children.forEachfunctionchild{ child_recursionchild；}； }; } 子递归核心元素； 返回节点； } 函数位置sd，pos_y{//pos_y是元素的目标位置y var总和； sum_y=rowheight；//该元素使用的所有垂直空间的总和 如果d.parent！=null {d.x=d.parent.x+10；} 其他的 {d.x=0；} d、 y=位置y； 如果你有孩子{ d、 孩子们{ 孩子。父母=d； sum_y+=positionschild，pos_y+sum_y； }; } 回报总额；

---

} 您的代码中有一个相当简单的错误

这里是一个更新的小提琴：

唯一的区别是：

    var nodeEnter = node.enter().append("g").classed("node_coltree", true)
        .attr("x", function (d) {
            return d.x;
    })
        .attr("y", function (d) {
            return d.y;
    })
       .attr("transform", function (d) {
            return "translate(" + d.x + "," + d.y + ")";
    });

具体而言，第一行更改为：

    var nodeEnter = node.enter().append("g").classed("g.node_coltree", true)

致：

在您的版本中，您使用的是classed。。。将类添加到g.node_coltree的节点中，但您选择了使用不匹配的.node_coltree，因此您的代码只是不断向svg添加越来越多的g元素。您的输入选择为节点数组中的每个项目都包含一个新的g元素。这意味着您的更新和退出选择始终为空，因此不会删除任何内容

---

我通过检查DOM发现了这一点，每次折叠或展开节点时都会追加一个新的g元素列表。如果选择工作正常，就不会发生这种情况。然后，只需跟踪选择是否错误，或者在创建节点时是否附加了不同的属性。在这种情况下，属性的创建似乎不正确。

您能在代码片段或JSFIDLE中提供一个包含数据的简单示例吗？非常感谢您的澄清和解释！

    var nodeEnter = node.enter().append("g").classed("node_coltree", true)