如何移除D3.js Tidy Tree中H与F节点间的连线？

有两种常用方法可以实现需求，你可以根据实际场景选择：

方法一：仅移除连线，保留F节点 #

这种方式会保留F节点的显示，但去掉它和H之间的父子连线。只需在绑定连线数据时，过滤掉H到F的那条连线即可：

修改代码中生成连线的部分：

link
  .selectAll()
  // 过滤掉H到F的连线
  .data(root.links().filter(link => !(link.source.data.name === "H" && link.target.data.name === "F")))
  .join("path")
  .attr("d", d3.linkHorizontal()
      .x(d => d.y)
      .y(d => d.x));

方法二：移除F节点及对应连线 #

如果不需要保留F节点，可以直接修改原始数据，将F从H的子节点列表中删除：

修改data对象：

const data = {
    "name": "tree",
    "id":0,
    "children": [
        {
            "name": "A",
             "id" :1,
            "children": [
                {
                    "name": "B",
                     "id" :2,

                    "children": [
                        { "name": "C", "id": 3 },
                    ]
                },
                {
                    "name": "H",
                     "id" :4,

                    "children": [
                        { "name": "D", "id": 5 },
                        { "name": "E", "id": 6 },
                        // 移除F节点的定义
                    ]
                },
            ]
        }
    ]
}

内容的提问来源于stack exchange，提问作者morteza mortezaie