问题描述
限时送ChatGPT账号..我正在尝试以编程方式打开可折叠树中的 d3.js 节点:
我使用以下 d3.js 代码段加载数据(在第二级之后折叠节点)，
d3.json("js/ontology.json", function(error, treeData) {如果(错误)抛出错误；root = d3.hierarchy(treeData, function(d) { return d.children; });root.x0 = 高度/2;根.y0 = 0;//在第二级之后折叠:root.children.forEach(折叠)；更新(根)；});然后我使用以下 d3.js 代码
var nodeEnter = node.enter().append('g').attr('类', '节点').attr('节点名称', d => d.data.name.toLowerCase()).attr(转换"，函数(d){return "translate(" + source.y0 + "," + source.x0 + ")";}).on('点击', 点击);还有这个功能
function expandNode() {const node = d3.select('.node[node-name="Nature"]').node();console.log('节点:', 节点);node.dispatchEvent(new Event('click'));}展开节点()；以编程方式打开自然"节点.
然而，当我替换自然"时(可见节点)与地球"(自然"的嵌套子代，不可见)这个表达式
const node = d3.select('.node[node-name="Earth"]').node();将扩大地球"仅当节点可见时.
该声明不会扩展自然"；显示地球"(并随后扩展地球")如果地球"不可见.
建议?
编辑 1.这与我之前的 StackOverflow 问题密切相关，
以编程方式打开 d3.js v4 可折叠树节点?
如果需要，请参考那里引用的 JSFiddle，
https://jsfiddle/vstuart/acx5zfgn/62/
标签不同，但数据和代码相似.
编辑 2. 后续问题
在 d3 中访问承诺的数据.js v6 [以编程方式打开嵌套的折叠节点]
关于:
d3.js v6;通过 d3.js 回调/promise 加载外部 JSON 数据；这个问题，在更新的上下文中.本体.json
{ "name": "Root",儿童":[{名称":文化"，儿童":[{姓名":LGBT"；}]},{名称":自然"，id":性质"，儿童":[{名称":地球"，id":地球"，儿童":[{名称":环境"；},{名称":地理"},{名称":地质"；},{名称":地缘政治"；},{名称":地缘政治 - 国家"；},{ 名称":地缘政治 - 国家 - 加拿大"},{名称":地缘政治 - 国家 - 美国"},{名称":自然"；},{名称":区域"；}]},{名称":宇宙"},{名称":外太空"}]},{名称":人文"，儿童":[{名称":历史"；},{名称":哲学"；},{名称":哲学-神学"；}]},{名称":杂项"，儿童":[{名称":维基百科"，网址":https://wikipedia"},{名称":Example"，网址":https://example"}]},{名称":科学"，儿童":[{名称":生物学"},{名称":健康"；},{名称":健康-医学"；},{名称":社会学"；}]},{名称":技术"，儿童":[{名称":计算机"；},{ 名称":计算机 - 硬件"},{ 名称":计算机 - 软件"},{名称":计算"；},{ 名称":计算 - 编程"；},{名称":互联网"},{名称":空格"；},{名称":运输"；}]},{名称":社会"，儿童":[{名称":业务"；},{名称":经济学"；},{ 名称":经济 - 商业"},{名称":经济 - 资本主义"；},{名称":经济 - 商务"；},{名称":经济-金融"},{名称":政治"；},{名称":公共服务"；}]}]}您需要递归地发现节点祖先，然后将它们逐一展开:
const findNodeAncestors = (root, name) =>{如果(root.name === 名称){返回 [名称];}如果(root.children){for (让 i = 0; i < root.children.length; i++) {const chain = findNodeAncestors(root.children[i], name);如果(链){chain.push(root.name);返回链；}}}返回空；};const chain = findNodeAncestors(treeData.data, '地球');for (let i = chain.length - 1; i >= 0; i--) {const node = d3.select(`.node[node-name="${chain[i]}"]`);const nodeData = node.datum();if (!nodeData.children && nodeData.data.children) {//节点有子节点并折叠node.node().dispatchEvent(new Event('click'));//展开节点}}查看它在 fiddle 中的工作.
I am trying to programmatically open d3.js nodes in a collapsible tree:
I load the data with the following d3.js snippet (which collapses the nodes after the second level),
d3.json("js/ontology.json", function(error, treeData) {
if (error) throw error;
root = d3.hierarchy(treeData, function(d) { return d.children; });
root.x0 = height / 2;
root.y0 = 0;
// Collapse after the second level:
root.children.forEach(collapse);
update(root);
});
I then use the following d3.js code
var nodeEnter = node.enter().append('g')
.attr('class', 'node')
.attr('node-name', d => d.data.name.toLowerCase())
.attr("transform", function(d) {
return "translate(" + source.y0 + "," + source.x0 + ")";
})
.on('click', click);
and this function
function expandNode() {
const node = d3.select('.node[node-name="Nature"]').node();
console.log('NODE: ', node);
node.dispatchEvent(new Event('click'));
}
expandNode();
to programmatically open the "Nature" node.
However, when I substitute "Nature" (visible node) with "Earth" (nested child of "Nature", not visible) this expression
const node = d3.select('.node[node-name="Earth"]').node();
will expand the "Earth" node only if it is visible.
That statement will not expand "Nature" to show "Earth" (and subsequently expand "Earth") if "Earth" is not visible.
Suggestions?
Edit 1. This is closely related to my earlier StackOverflow question,
Programmatically opening d3.js v4 collapsible tree nodes?
If needed, please refer to the JSFiddle referenced there,
https://jsfiddle/vstuart/acx5zfgn/62/
The labels are different but otherwise the data and code are similar.
Edit 2. Follow-on question
Accessing promised data in d3.js v6 [programmatically opening nested collapsed nodes]
relating to:
d3.js v6; loading external JSON data via d3.js callback/promise; this question, in that updated context.ontology.json
{ "name": "Root",
"children": [
{ "name": "Culture",
"children": [
{ "name": "LGBT" }
]
},
{ "name": "Nature",
"id": "nature",
"children": [
{ "name": "Earth",
"id": "earth",
"children": [
{ "name": "Environment" },
{ "name": "Geography" },
{ "name": "Geology" },
{ "name": "Geopolitical" },
{ "name": "Geopolitical - Countries" },
{ "name": "Geopolitical - Countries - Canada" },
{ "name": "Geopolitical - Countries - United States" },
{ "name": "Nature" },
{ "name": "Regions" }
]
},
{ "name": "Cosmos" },
{ "name": "Outer space" }
]
},
{ "name": "Humanities",
"children": [
{ "name": "History" },
{ "name": "Philosophy" },
{ "name": "Philosophy - Theology" }
]
},
{ "name": "Miscellaneous",
"children": [
{ "name": "Wikipedia",
"url": "https://wikipedia" },
{ "name": "Example",
"url": "https://example" }
]
},
{ "name": "Science",
"children": [
{ "name": "Biology" },
{ "name": "Health" },
{ "name": "Health - Medicine" },
{ "name": "Sociology" }
]
},
{ "name": "Technology",
"children": [
{ "name": "Computers" },
{ "name": "Computers - Hardware" },
{ "name": "Computers - Software" },
{ "name": "Computing" },
{ "name": "Computing - Programming" },
{ "name": "Internet" },
{ "name": "Space" },
{ "name": "Transportation" }
]
},
{ "name": "Society",
"children": [
{ "name": "Business" },
{ "name": "Economics" },
{ "name": "Economics - Business" },
{ "name": "Economics - Capitalism" },
{ "name": "Economics - Commerce" },
{ "name": "Economics - Finance" },
{ "name": "Politics" },
{ "name": "Public services" }
]
}
]
}
解决方案
You need to discover the node ancestors recursively and then expand them on by one:
const findNodeAncestors = (root, name) => {
if (root.name === name) {
return [name];
}
if (root.children) {
for (let i = 0; i < root.children.length; i++) {
const chain = findNodeAncestors(root.children[i], name);
if (chain) {
chain.push(root.name);
return chain;
}
}
}
return null;
};
const chain = findNodeAncestors(treeData.data, 'Earth');
for (let i = chain.length - 1; i >= 0; i--) {
const node = d3.select(`.node[node-name="${chain[i]}"]`);
const nodeData = node.datum();
if (!nodeData.children && nodeData.data.children) { // Node has children and collapsed
node.node().dispatchEvent(new Event('click')); // Expand the node
}
}
See it's working in a fiddle.
这篇关于在 d3.js v4 中以编程方式打开嵌套、折叠(隐藏)节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
更多推荐
[db:关键词]
发布评论