以编程方式打开 d3.js v4 可折叠树节点? [英] Programmatically opening d3.js v4 collapsible tree nodes?
问题描述
我已经修改了 d3noob 的 d3.js 版本 4
https://bl.ocks.org/d3noob/43a860bc0024792f8cad5ecdp Mike Bostock 的可折叠树的衍生物 https://bl.ocks.org/mbostock/4339083 添加基于鼠标的平移和缩放，并从外部文件加载 JSON 数据.
- [更新，有解决方案] https://jsfiddle.net/vstuart/acx5zfgn/62/
虽然没有显示在那个小提琴中，但在我的 HTML 前端(基于 AjaxSolr 框架)中，我有与 Apache Solr 方面相对应的超链接，当点击时更新网页(通过更新的 Solr 请求)
所有这些都运行良好.
但是，当我单击这些构面超链接时，我也希望能够展开相应的 d3.js 节点.
任何建议将不胜感激.
附录.对于那些对答案感兴趣的人，我更新了我的 JSFiddle、HTML 代码(如下)和 GitHub Gist —— 全部在两个地方:在该代码中搜索per answer at"查看添加的内容.
为了验证添加的代码，我将 Gist 中更新的 HTML 内容转储到一个新的 index.html 文件中，该文件在 localhost 上运行的 Firefox v88.0 中按预期运行(不需要网络服务器).
单页代码
<html lang="en-US";xmlns:xlink=http://www.w3.org/1999/xlink"><头><元内容="文本/html;字符集=utf-8"http-equiv="Content-Type"><风格>.节点{光标:指针；}.node圆{填充:#fff;笔画:钢蓝；描边宽度:3px；}.node 文本 {字体:12px 无衬线；}.关联 {填充:无；中风:#ccc;描边宽度:2px；}#includedContent {位置:静态！重要；显示:内联块；}#d3_object {宽度:75%；边距:0.5rem 0.5rem 1rem 0.25rem；}</风格><script type="text/javascript";src=https://code.jquery.com/jquery-3.5.1.min.js"完整性=sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="crossorigin=匿名"></script><script src=https://d3js.org/d3.v4.min.js"></script><身体><div id="d3_object"><对象><div id="includedContent"></div></对象><!-- **** 添加，例如，将在此处打开的超链接数据"d3.js 树中的节点 ***** --><脚本>//设置图表的尺寸和边距var margin = {top: 20, right: 90, bottom: 30, left: 90},宽度 = 960 - margin.left - margin.right，高度 = 500 - margin.top - margin.bottom;//----------------------------------------/* 平移，缩放！*///https://www.d3-graph-gallery.com/graph/interactivity_zoom.htmlvar svg = d3.select("body").append("svg").attr(宽度", 宽度 + margin.right + margin.left).attr("height", height + margin.top + margin.bottom).call(d3.zoom().on(zoom", function () {svg.attr(转换"，d3.event.transform)})).append("g").attr(转换"，翻译(")+ margin.left + ",";+ margin.top + ")");//----------------------------------------变量 i = 0,持续时间 = 250,根;//声明一个树布局并分配大小var treemap = d3.tree().size([height, width]);//加载外部数据d3.json(https://gist.githubusercontent.com/mbostock/4339083/raw/9585d220bef18a0925922f4d384265ef767566f5/flare.json", function(error, treeData) {如果(错误)抛出错误；//分配父级、子级、高度、深度root = d3.hierarchy(treeData, function(d) { return d.children; });root.x0 = 高度/2;根.y0 = 0;//在第二级之后折叠root.children.forEach(折叠)；更新(根)；});//折叠节点及其所有子节点函数折叠(d){如果(d.儿童){d._children = d.childrend._children.forEach(折叠)d.children = null}}功能更新(来源){//为节点分配 x 和 y 位置var treeData = treemap(root);//计算新的树布局.var 节点 = treeData.descendants(),链接 = treeData.descendants().slice(1);//标准化固定深度.node.forEach(function(d){ d.y = d.depth * 180});//********** 节点部分 *******************//更新节点...var node = svg.selectAll('g.node').data(nodes, function(d) {return 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('节点名称', d => d.data.name)//-------------------------------------.attr(转换"，函数(d){return "translate(" + source.y0 + "," + source.x0 + ")";}).on('点击', 点击);//为节点添加圆nodeEnter.append('圆圈').attr('类', '节点').attr('r', 1e-6).style(填充"，函数(d){返回 d._children ?轻钢蓝":#fff"；});//为节点添加标签nodeEnter.append('文本').attr("dy", ".35em").attr(x"，函数(d){返回 d.children ||d._儿童?-13:13；}).attr(文本锚"，函数(d){返回 d.children ||d._儿童?结束":开始"；}).text(function(d) { return d.data.name; });//更新var nodeUpdate = nodeEnter.merge(node);//过渡到节点的正确位置nodeUpdate.transition().duration(持续时间).attr(转换"，函数(d){return "translate(" + d.y + "," + d.x + ")";});//更新节点属性和样式nodeUpdate.select('circle.node').attr('r', 10).style(填充"，函数(d){返回 d._children ?轻钢蓝":#fff"；}).attr('光标', '指针');//删除所有存在的节点var nodeExit = node.exit().transition().duration(持续时间).attr(转换"，函数(d){return "translate(" + source.y + "," + source.x + ")";}).消除();//在退出时将节点圆圈大小减少到 0nodeExit.select('圆圈').attr('r', 1e-6);//退出时降低文本标签的不透明度nodeExit.select('文本').style('填充不透明度', 1e-6);//********* 链接部分 ********************//更新链接...var link = svg.selectAll('path.link').data(links, function(d) { return d.id; });//在父级之前的位置输入任何新链接.var linkEnter = link.enter().insert('path', "g").attr(类"，链接").attr('d', 函数(d){var o = {x: source.x0, y: source.y0}返回对角线(o, o)});//更新var linkUpdate = linkEnter.merge(link);//过渡回父元素位置linkUpdate.transition().duration(持续时间).attr('d', function(d){ return diagonal(d, d.parent) });//删除所有现有链接var linkExit = link.exit().transition().duration(持续时间).attr('d', 函数(d) {var o = {x: source.x, y: source.y}返回对角线(o, o)}).消除();//存储用于转换的旧位置.节点.forEach(函数(d){d.x0 = d.x;d.y0 = d.y;});//创建一条从父节点到子节点的弯曲(对角线)路径函数对角线(s，d){路径 = `M ${s.y} ${s.x}C ${(s.y + d.y)/2} ${s.x},${(s.y + d.y)/2} ${d.x},${d.y} ${d.x}`返回路径}//----------------------------------------//点击时切换子项.功能点击(d){如果(d.儿童){d._children = d.children;d.children = null;} else if (d._children) {d.children = d._children;d._children = null;} 别的 {//这是一个叶节点，所以重定向.console.log('d:', d)console.log('d.data:', d.data)console.log('d.name:', d.name)console.log('d.data.name:', d.data.name)console.log('urlMap[d.data.name]:', urlMap[d.data.name])window.location = d.data.url;//window.open("https://www.example.com", "_self");}更新);}//----------------------------------------}//每个答案在//https://stackoverflow.com/questions/67480339/programmatically-opening-d3-js-v4-collapsible-tree-nodessetTimeout(() => {const node = d3.select('.node[node-name="analytics"]').node();console.log('节点:', 节点);node.dispatchEvent(new Event('click'));}, 2500);