我们使用了D3JS层次结构图来在树视图中显示公司员工。在那里，我们摸了三个经理的员工。然后，如果我们点击其中一个经理磁贴，它将展开并查看相关员工。在那里，我们得到了一些UI问题与大量的员工。如果一个经理有很多员工，树会扩张得很大，很难识别。我们需要的是，是有办法尽量减少以前扩大管理器瓷砖时，点击新的管理器瓷砖.通过这样做，我们可以保存更多的空间来显示当前检查视图。
epggiuax1#
我假设你正在扩展classic D3 collapsible tree example，它的最新工作版本现在是hosted on Observable。你只需要修改一小块代码就可以得到你想要的。以下是单击节点时原始响应的方式：
.on("click", (event, d) => { d.children = d.children ? null : d._children; update(d); });
.on("click", (event, d) => {
d.children = d.children ? null : d._children;
update(d);
});
也改变一下：
.on("click", (event, d) => { //// Store the ancestors of the node you've clicked on let ancestors = d.ancestors(); //// Collapse everone root .descendants() .slice(1) .reverse() .forEach(function (node) { node.children = null; }); //// Re-expand the ancestors ancestors.forEach(function (d) { d.children = d._children; }); update(node);});
//// Store the ancestors of the node you've clicked on
let ancestors = d.ancestors();
//// Collapse everone
root
.descendants()
.slice(1)
.reverse()
.forEach(function (node) {
node.children = null;
//// Re-expand the ancestors
ancestors.forEach(function (d) {
d.children = d._children;
update(node);
我用这些修改创建了一个fork of that notebook，此外，将初始扩展限制为一步。结果如下：
<div id="observablehq-chart-e84da0ba"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@observablehq/inspector@5/dist/inspector.css"><script type="module">import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@5/dist/runtime.js";import define from "https://api.observablehq.com/d/[email protected]?v=3";new Runtime().module(define, name => { if (name === "chart") return new Inspector(document.querySelector("#observablehq-chart-e84da0ba"));});</script>
<div id="observablehq-chart-e84da0ba"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@observablehq/inspector@5/dist/inspector.css">
<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@5/dist/runtime.js";
import define from "https://api.observablehq.com/d/[email protected]?v=3";
new Runtime().module(define, name => {
if (name === "chart") return new Inspector(document.querySelector("#observablehq-chart-e84da0ba"));
</script>
我为我工作的大学做了类似的事情。我设置了一个搜索框，允许您按姓名搜索员工，而不是您所描述的单击时自动折叠的方法。当你搜索某个人时，整个树会崩溃并重新扩展到你想要的路径。在this Observable notebook中实现。
1条答案
按热度按时间epggiuax1#
我假设你正在扩展classic D3 collapsible tree example，它的最新工作版本现在是hosted on Observable。你只需要修改一小块代码就可以得到你想要的。
以下是单击节点时原始响应的方式：
也改变一下：
我用这些修改创建了一个fork of that notebook，此外，将初始扩展限制为一步。结果如下：
我为我工作的大学做了类似的事情。我设置了一个搜索框，允许您按姓名搜索员工，而不是您所描述的单击时自动折叠的方法。当你搜索某个人时，整个树会崩溃并重新扩展到你想要的路径。在this Observable notebook中实现。