Javascript 以编程方式打开d3.js v4可折叠树节点？

我已经修改了d3noob的d3.js版本4

Mike Bostock可折叠树的导数

添加基于鼠标的平移和缩放，并从外部文件加载JSON数据

• [更新，含解决方案]

尽管没有显示在该小提琴中，但在我的HTML前端（基于AjaxSolr框架）中，我有与ApacheSolr方面相对应的超链接，单击该超链接可更新网页（通过更新的Solr请求）

所有这些都运作良好

但是，当我单击那些facet超链接时，我还希望能够扩展相应的d3.js节点

如有任何建议，将不胜感激

---

附录。对于那些对答案感兴趣的人，我更新了我的JSFIDLE、HTML代码（如下）和GitHub Gist——所有这些都在两个地方：在代码中搜索“每个答案”以查看添加内容

为了验证添加的代码，我将Gist中更新的HTML内容转储到一个新的index.HTML文件中，该文件在本地主机上运行的Firefox v88.0中按预期运行（不需要Web服务器）

---

单页代码

• 要点：

.节点{
光标：指针；
}
.节点圆{
填充：#fff；
笔画：钢蓝；
笔画宽度：3px；
}
.节点文本{
字体：12px无衬线；
}
.链接{
填充：无；
冲程：#ccc；
笔画宽度：2px；
}
#包含内容{
位置：静态！重要；
显示：内联块；
}
#d3_对象{
宽度：75%；
保证金：0.5雷姆0.5雷姆1雷姆0.25雷姆；
}
//设置图表的尺寸和边距
var margin={顶部：20，右侧：90，底部：30，左侧：90}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
// ----------------------------------------
/*平移，缩放*/
// https://www.d3-graph-gallery.com/graph/interactivity_zoom.html
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。右侧+边距。左侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.call（d3.zoom（）.on（“zoom”，函数）（）{
attr（“transform”，d3.event.transform）
}))
.附加（“g”）
.attr（“转换”、“转换”
+margin.left+”，“+margin.top+”）；
// ----------------------------------------
var i=0，
持续时间=250，
根；
//声明树布局并指定大小
var treemap=d3.tree（）.size（[height，width]）；
//加载外部数据
d3.json（“https://gist.githubusercontent.com/mbostock/4339083/raw/9585d220bef18a0925922f4d384265ef767566f5/flare.json，函数（错误，树数据）{
如果（错误）抛出错误；
//指定父对象、子对象、高度和深度
root=d3.hierarchy（treeData，函数（d）{返回d.children；}）；
root.x0=高度/2；
root.y0=0；
//在第二层之后崩溃
根。子。forEach（塌陷）；
更新（根）；
});
//折叠节点及其所有子节点
功能崩溃（d）{
如果（d.儿童）{
d、 _children=d.children
d、 _儿童。forEach（崩溃）
d、 children=null
}
}
函数更新（源）{
//为节点指定x和y位置
var treeData=树映射（根）；
//计算新的树布局。
var nodes=treeData.subjects（），
links=treeData.subjects（）.slice（1）；
//为固定深度进行规格化。
forEach（函数（d）{d.y=d.depth*180}）；
//**********节点部分*******************
//更新节点。。。
var node=svg.selectAll（'g.node'）
.data（节点，函数（d）{返回d.id | |（d.id=++i）}）；
//在父对象的上一个位置输入任何新模式。
var nodeEnter=node.enter（）.append（'g'）
.attr（'类'，'节点'）
// --------------------------------------------
//每答覆
// https://stackoverflow.com/questions/67480339/programmatically-opening-d3-js-v4-collapsible-tree-nodes
.attr（'node-name'，d=>d.data.name）
// --------------------------------------------
.attr（“转换”，函数（d）{
返回“translate”（“+source.y0+”，“+source.x0+”）；
})
.on（'点击'，点击）；
//为节点添加圆
nodeEnter.append（'circle'））
.attr（'类'，'节点'）
.attr（'r'，1e-6）
.样式（“填充”，功能（d）{
返回d.#儿童？“淡蓝色”：“fff”；
});
//为节点添加标签
nodeEnter.append（'text'）
.attr（“dy”，“.35em”）
.attr（“x”，函数（d）{
返回d.children | | d.| U儿童？-13:13；
})
.attr（“文本锚定”，函数（d）{
返回d.children | d.| u children？“结束”：“开始”；
})
.text（函数（d）{返回d.data.name；}）；
//更新
var nodeUpdate=nodenter.merge（节点）；
//转换到节点的正确位置
nodeUpdate.transition（）
.持续时间（持续时间）
.attr（“转换”，函数（d）{
返回“translate”（“+d.y+”，“+d.x+”）；
});
//更新节点属性和样式
nodeUpdate.select（'circle.node'）
.attr（'r'，10）
.样式（“填充”，功能（d）{
返回d.#儿童？“淡蓝色”：“fff”；
})
.attr（“光标”、“指针”）；
//删除任何现有节点
var nodeExit=node.exit（）.transition（）
.持续时间（持续时间）
.attr（“转换”，函数（d）{
返回“translate”（“+source.y+”，“+source.x+”）；
})
.remove（）；
//退出时，将节点圆的大小减小为0
nodeExit.select（'c
node.enter().append('g')
  .classed('node', true)
  .attr('node-name', d => d.data.name)
  ...
  .on('click', click);

d3.select('.node[node-name="analytics"]').node().dispatchEvent(new Event('click'));