javascript - 如何在折叠位置启动 d3.js 树？-6ren

javascript - 如何在折叠位置启动 d3.js 树？

转载作者：行者123 更新时间：2023-11-29 19:24:37

我得到了创建树的 d3.js 代码，我很高兴地完成了，但我不知道如何开始折叠树。

我找到了 this post这解释了如何去做，但它似乎没有对我的代码做任何事情: 编辑 javascript 以切换每个节点的 _children 和 children 属性。这可以像这样完成

var treeData = [


{
    "name": "Product",
        "parent": "null",
        "children": [

    <!-------------- BRANCH ----------->	

    {
        "name": "Servers",
            "parent": "Top Level",
            "children": [{
            "name": "Options (Hard disk / RAM / PSU / Network cards etc)",
                "parent": "Servers"
        }, {
            "name": "Software licensing – Microsoft O/S?",
                "parent": "Servers"
        }, {
            "name": "Switching – HP / Cisco",
                "parent": "Servers"
        }, {
            "name": "UPS – APC",
                "parent": "Servers"
        }, {
            "name": "Cabling",
                "parent": "Servers"
        }, {
            "name": "Warranty – Ecare+ / HP Care Pack?",
                "parent": "Servers"
        }, {
            "name": "Engineer Installation – on-site / remote log-in?",
                "parent": "Servers"
        }, {
            "name": "Config centre – Build & test server and parts prior to delivery",
                "parent": "Servers"
        }, {
            "name": "Telephone support credits",
                "parent": "Servers"
        }

        ]
    },

    <!-------------- BRANCH ----------->		  

    {
        "name": "PC/Laptop/Workstation",
            "parent": "Top Level",
            "children": [{
            "name": "Monitor",
                "parent": "PC/Laptop/Workstation"
        }, {
            "name": "Docking Station",
                "parent": "PC/Laptop/Workstation"
        }, {
            "name": "Microsoft Office license",
                "parent": "PC/Laptop/Workstation"
        }, {
            "name": "Carry Case (laptop)",
                "parent": "PC/Laptop/Workstation"
        }, {
            "name": "Accessories – Mouse/Keyboard/Riser/Keylock",
                "parent": "PC/Laptop/Workstation"
        }, {
            "name": "Config centre – desktop imaging/adding 2nd HD or RAM",
                "parent": "PC/Laptop/Workstation"
        }, {
            "name": "On-site installation – desktop rollout",
                "parent": "PC/Laptop/Workstation"
        }, {
            "name": "Telephone Support credits",
                "parent": "PC/Laptop/Workstation"
        }

        ]
    },

    <!-------------- BRANCH ----------->		  

    {
        "name": "Switches",
            "parent": "Top Level",
            "children": [{
            "name": "SFP/Transceivers",
                "parent": "Switches"
        }, {
            "name": "Cables",
                "parent": "Switches"
        }, {
            "name": "Config Centre – pre-delivery config work",
                "parent": "Switches"
        }, {
            "name": "Network cards",
                "parent": "Switches"
        }, {
            "name": "On-site installation",
                "parent": "Switches"
        }

        ]
    },






    <!-------------- BRANCH ----------->	  



    <!-------------- END ----------->	
    ]
},

];


// ************** Generate the tree diagram	 *****************
var margin = {
    top: 20,
    right: 120,
    bottom: 20,
    left: 120
},
width = 960 - margin.right - margin.left,
    height = 500 - margin.top - margin.bottom;

var i = 0,
    duration = 750,
    root;

var tree = d3.layout.tree()
    .size([height, width]);

var diagonal = d3.svg.diagonal()
    .projection(function (d) {
    return [d.y, d.x];
});

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

root = treeData[0];
root.x0 = height / 2;
root.y0 = 0;

update(root);

d3.select(self.frameElement).style("height", "500px");

function update(source) {

    // Compute the new tree layout.
    var nodes = tree.nodes(root).reverse(),
        links = tree.links(nodes);

    // Normalize for fixed-depth.
    nodes.forEach(function (d) {
        d.y = d.depth * 250;
    });

    // Update the nodes…
    var node = svg.selectAll("g.node")
        .data(nodes, function (d) {
        return d.id || (d.id = ++i);
    });

    // Enter any new nodes at the parent's previous position.
    var nodeEnter = node.enter().append("g")
        .attr("class", "node")
        .attr("transform", function (d) {
        return "translate(" + source.y0 + "," + source.x0 + ")";
    })
        .on("click", click);

    nodeEnter.append("circle")
        .attr("r", 1e-6)
        .style("fill", function (d) {
        return d._children ? "lightsteelblue" : "#fff";
    });

    nodeEnter.append("text")
        .attr("x", function (d) {
        return d.children || d._children ? -13 : 13;
    })
        .attr("dy", ".35em")
        .attr("text-anchor", function (d) {
        return d.children || d._children ? "end" : "start";
    })
        .text(function (d) {
        return d.name;
    })
        .style("fill-opacity", 1e-6);

    // Transition nodes to their new position.
    var nodeUpdate = node.transition()
        .duration(duration)
        .attr("transform", function (d) {
        return "translate(" + d.y + "," + d.x + ")";
    });

    nodeUpdate.select("circle")
        .attr("r", 10)
        .style("fill", function (d) {
        return d._children ? "lightsteelblue" : "#fff";
    });

    nodeUpdate.select("text")
        .style("fill-opacity", 1);

    // Transition exiting nodes to the parent's new position.
    var nodeExit = node.exit().transition()
        .duration(duration)
        .attr("transform", function (d) {
        return "translate(" + source.y + "," + source.x + ")";
    })
        .remove();

    nodeExit.select("circle")
        .attr("r", 1e-6);

    nodeExit.select("text")
        .style("fill-opacity", 1e-6);

    // Update the links…
    var link = svg.selectAll("path.link")
        .data(links, function (d) {
        return d.target.id;
    });

    // Enter any new links at the parent's previous position.
    link.enter().insert("path", "g")
        .attr("class", "link")
        .attr("d", function (d) {
        var o = {
            x: source.x0,
            y: source.y0
        };
        return diagonal({
            source: o,
            target: o
        });
    });

    // Transition links to their new position.
    link.transition()
        .duration(duration)
        .attr("d", diagonal);

    // Transition exiting nodes to the parent's new position.
    link.exit().transition()
        .duration(duration)
        .attr("d", function (d) {
        var o = {
            x: source.x,
            y: source.y
        };
        return diagonal({
            source: o,
            target: o
        });
    })
        .remove();

    // Stash the old positions for transition.
    nodes.forEach(function (d) {
        d.x0 = d.x;
        d.y0 = d.y;
    });
}

// Toggle children on click.
function click(d) {
    if (d.children) {
        d._children = d.children;
        d.children = null;
    } else {
        d.children = d._children;
        d._children = null;
    }
    update(d);
}

	.node {
	    cursor: pointer;
	}
	.node circle {
	    fill: #fff;
	    stroke: steelblue;
	    stroke-width: 3px;
	}
	.node text {
	    font: 12px sans-serif;
	    background-color:##
	}
	.link {
	    fill: none;
	    stroke: #ccc;
	    stroke-width: 2px;
	}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.4/d3.min.js"></script>

Alternative fiddle

最佳答案

所有需要更改的是根节点的 children 到 _children。

var treeData = [
{
    "name": "Product",
        "parent": "null",
        "_children": [

    <!-------------- BRANCH ----------->	

    {
        "name": "Servers",
            "parent": "Top Level",
            "_children": [{
            "name": "Options (Hard disk / RAM / PSU / Network cards etc)",
                "parent": "Servers"
        }, {
            "name": "Software licensing – Microsoft O/S?",
                "parent": "Servers"
        }, {
            "name": "Switching – HP / Cisco",
                "parent": "Servers"
        }, {
            "name": "UPS – APC",
                "parent": "Servers"
        }, {
            "name": "Cabling",
                "parent": "Servers"
        }, {
            "name": "Warranty – Ecare+ / HP Care Pack?",
                "parent": "Servers"
        }, {
            "name": "Engineer Installation – on-site / remote log-in?",
                "parent": "Servers"
        }, {
            "name": "Config centre – Build & test server and parts prior to delivery",
                "parent": "Servers"
        }, {
            "name": "Telephone support credits",
                "parent": "Servers"
        }

        ]
    },

    <!-------------- BRANCH ----------->		  

    {
        "name": "PC/Laptop/Workstation",
            "parent": "Top Level",
            "_children": [{
            "name": "Monitor",
                "parent": "PC/Laptop/Workstation"
        }, {
            "name": "Docking Station",
                "parent": "PC/Laptop/Workstation"
        }, {
            "name": "Microsoft Office license",
                "parent": "PC/Laptop/Workstation"
        }, {
            "name": "Carry Case (laptop)",
                "parent": "PC/Laptop/Workstation"
        }, {
            "name": "Accessories – Mouse/Keyboard/Riser/Keylock",
                "parent": "PC/Laptop/Workstation"
        }, {
            "name": "Config centre – desktop imaging/adding 2nd HD or RAM",
                "parent": "PC/Laptop/Workstation"
        }, {
            "name": "On-site installation – desktop rollout",
                "parent": "PC/Laptop/Workstation"
        }, {
            "name": "Telephone Support credits",
                "parent": "PC/Laptop/Workstation"
        }

        ]
    },

    <!-------------- BRANCH ----------->		  

    {
        "name": "Switches",
            "parent": "Top Level",
            "_children": [{
            "name": "SFP/Transceivers",
                "parent": "Switches"
        }, {
            "name": "Cables",
                "parent": "Switches"
        }, {
            "name": "Config Centre – pre-delivery config work",
                "parent": "Switches"
        }, {
            "name": "Network cards",
                "parent": "Switches"
        }, {
            "name": "On-site installation",
                "parent": "Switches"
        }

        ]
    },
    <!-------------- BRANCH ----------->	  

    <!-------------- END ----------->	
    ]
},
];


// ************** Generate the tree diagram	 *****************
var margin = {
    top: 20,
    right: 120,
    bottom: 20,
    left: 120
},
width = 960 - margin.right - margin.left,
    height = 500 - margin.top - margin.bottom;

var i = 0,
    duration = 750,
    root;

var tree = d3.layout.tree()
    .size([height, width]);

var diagonal = d3.svg.diagonal()
    .projection(function (d) {
    return [d.y, d.x];
});

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

root = treeData[0];
root.x0 = height / 2;
root.y0 = 0;

update(root);

d3.select(self.frameElement).style("height", "500px");

function update(source) {

    // Compute the new tree layout.
    var nodes = tree.nodes(root).reverse(),
        links = tree.links(nodes);

    // Normalize for fixed-depth.
    nodes.forEach(function (d) {
        d.y = d.depth * 250;
    });

    // Update the nodes…
    var node = svg.selectAll("g.node")
        .data(nodes, function (d) {
        return d.id || (d.id = ++i);
    });

    // Enter any new nodes at the parent's previous position.
    var nodeEnter = node.enter().append("g")
        .attr("class", "node")
        .attr("transform", function (d) {
        return "translate(" + source.y0 + "," + source.x0 + ")";
    })
    .on("click", click);

    nodeEnter.append("circle")
        .attr("r", 1e-6)
        .style("fill", function (d) {
        return d._children ? "lightsteelblue" : "#fff";
    });

    nodeEnter.append("text")
        .attr("x", function (d) {
        return d.children || d._children ? -13 : 13;
    })
        .attr("dy", ".35em")
        .attr("text-anchor", function (d) {
        return d.children || d._children ? "end" : "start";
    })
        .text(function (d) {
        return d.name;
    })
        .style("fill-opacity", 1e-6);

    // Transition nodes to their new position.
    var nodeUpdate = node.transition()
        .duration(duration)
        .attr("transform", function (d) {
        return "translate(" + d.y + "," + d.x + ")";
    });

    nodeUpdate.select("circle")
        .attr("r", 10)
        .style("fill", function (d) {
        return d._children ? "lightsteelblue" : "#fff";
    });

    nodeUpdate.select("text")
      .style("fill-opacity", 1);

    // Transition exiting nodes to the parent's new position.
    var nodeExit = node.exit().transition()
        .duration(duration)
        .attr("transform", function (d) {
        return "translate(" + source.y + "," + source.x + ")";
    })
    .remove();

    nodeExit.select("circle")
        .attr("r", 1e-6);

    nodeExit.select("text")
        .style("fill-opacity", 1e-6);

    // Update the links…
    var link = svg.selectAll("path.link")
        .data(links, function (d) {
        return d.target.id;
    });

    // Enter any new links at the parent's previous position.
    link.enter().insert("path", "g")
        .attr("class", "link")
        .attr("d", function (d) {
        var o = {
            x: source.x0,
            y: source.y0
        };
        return diagonal({
            source: o,
            target: o
        });
    });

    // Transition links to their new position.
    link.transition()
        .duration(duration)
        .attr("d", diagonal);

    // Transition exiting nodes to the parent's new position.
    link.exit().transition()
        .duration(duration)
        .attr("d", function (d) {
        var o = {
            x: source.x,
            y: source.y
        };
        return diagonal({
            source: o,
            target: o
        });
    })
        .remove();

    // Stash the old positions for transition.
    nodes.forEach(function (d) {
        d.x0 = d.x;
        d.y0 = d.y;
    });
}

// Toggle children on click.
function click(d) {
    if (d.children) {
        d._children = d.children;
        d.children = null;
    } else {
        d.children = d._children;
        d._children = null;
    }
    update(d);
}

	.node {
	    cursor: pointer;
	}
	.node circle {
	    fill: #fff;
	    stroke: steelblue;
	    stroke-width: 3px;
	}
	.node text {
	    font: 12px sans-serif;
	    background-color:##
	}
	.link {
	    fill: none;
	    stroke: #ccc;
	    stroke-width: 2px;
	}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

请注意，您可能需要全屏显示截图才能查看其结果。

关于javascript - 如何在折叠位置启动 d3.js 树？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31342129/

文章推荐： javascript - 延迟函数的jquery返回值不起作用

文章推荐： php - 使用php laravel框架连接多数据库

文章推荐： Android Layout 同一行中不同宽度的3个项目

out-of-memory - 启动 minishift 或占用大量内存时，启动 OpenShift 集群永远不会结束
每当我运行命令以将 Virtualbox 驱动程序启动 Minishift 到操作系统主机时，它都需要一段疯狂的时间，而且它永远不会结束。有时我什至收到有关达到存储限制的错误消息。不知道是不是描述h
node.js - 使用 docker 启动 npm 启动？
您好，我正在使用 npm 运行一个基本的 React 项目，我正尝试在 docker 容器中启动它。但是我实际上无法让项目运行。我的 dockerfile 看起来像这样: FROM node:7.8.
linux - 无法从 SSH 启动 MonoGame，但可以从 GUI 启动
所以我想从我的 SSH 终端开始游戏。这真的很奇怪，当我直接从 Linux GUI 执行此操作时，它可以工作。但是当我使用 SSH 客户端进行远程连接时，它就崩溃了。似乎与我的显示驱动程序有关。 U
android - 从 WallpaperService 启动 Intent 或向 WallpaperService 启动 Intent
我有一个显示图像的动态壁纸。我在 Activity 中更改了该图像。然后我需要通知动态壁纸，以便它知道重新加载资源。 Intent 似乎是完美、简单的解决方案: Intent intent = new
java - 可以从 Eclipse (STS) 启动 Spring Boot，但不能从 CLI 启动
我有一个似乎无法解决的问题。我在 Boot Dashboard 中使用 STS 3.9.2 从 Eclipse (Oxygen) 启动 Spring Boot 应用程序没有任何问题: 但是，当我尝试从
python - 在 CMD "python"启动 Python 3.3， "py"启动 Python 2.7，我该如何更改？
全新的 Python，在我开始摆弄东西之前先设置和安装东西。我的理解是 Python 2.7 和 Python 3.3 之间存在一些显着差异/不兼容，尽管这两个版本都得到了很好的使用，所以我认为最好安
jQuery 启动
在使用了很长时间的 jQuery 之后，我有一个问题，我正在使用 jQuery 模式(样式)编写一个简单的代码， (function(window, undefined) { var jQu
Spring 启动@Configurable
我正在尝试在 spring boot 应用程序下的非 spring 托管类中配置 Autowired。我在 tomcat 服务器下部署的 Web 应用程序下成功运行了这个。但是当我想在 spring
haskell - 启动 xmonad
我对 xmonad 完全陌生，但我想开始使用它来提高我的工作效率。这是我一直在使用的指南(我使用的是 Apple OS X Snow Leopard) http://xmonad.org/tour.
Spring 启动-管理交易和多个数据源
我试图将Spring Boot指南中的Managing Transactions示例扩展到两个数据源，但是@Transaction注释似乎仅对其中一个数据源有效。在“Application.java
Conemu 启动，任务打开多个选项卡
conEmu 有没有办法默认打开多个不同的选项卡？我看到这个页面解释了如何使用 splits , 我意识到我可以按 Ctrl + T, 1, Enter，但我希望有一种方法可以自动执行此操作! "%
jquery - SignalR - 启动
我正在寻找快速而肮脏的答案。我当时脑子一片空白，盯着屏幕看了 12 个小时以上，我想我中枪了。我想做一个简单的 SignalR 应用程序作为教程。我找到了这个example ，但我不断收到票证未定义
powershell - 启动/停止特定订阅下的所有虚拟机
我正在使用 Azure Powershell cmdlet 来启动/停止 VM。 Start-AzureVM [-ServiceName] [-Name] [ ] Stop-AzureVM [-S
iis - 启动/停止iis和mssql的powershell脚本代码
我想使用Powershell脚本代码启动/停止iis和mssql 意味着当我运行ps脚本时，我想启动/停止iis和mssql 我在网上搜索了它，发现了一些代码，但按照我的要求无法正常工作码: $ii
liferay - 启动 liferay
我在 liferay 工作。我们在我们的项目中使用一个模块来创建 liferay 主题。我使用命令 ant -Ddeploy.war=true 将它部署在服务器中。 war 文件在 liferay 部
ipython - 启动 IPython
我想在已安装 Python 2.7 的 Windows XP 计算机上运行 IPython(版本 0.12)。我通过 Windows 二进制安装程序安装，但安装后 IPython 没有显示在菜单中，
docker - 启动+卷挂载后在docker容器内自动运行命令
我从创建了自己的简单图片。 FROM python:2.7.11 RUN mkdir /extra/later/ \ && mkdir /yyy 现在，我可以执行以下步骤: docker run
javascript - 启动/停止脚本以刷新页面
$(document).ready(function () { setTimeout(function() { window.location.reload(); }, 2000); // 2
javascript - OpenWeatherMap 启动
我刚刚创建了一个帐户 OpenWeatherMap 我想通过城市 ID API 调用获取当前位置的天气: http://api.openweathermap.org/data/2.5/weather?
ios - 启动 Storyboard中的图像未更新
我注意到，如果我更改 xcasset 中的图像，启动 Storyboard不会更新。例如，假设您的启动 Storyboard中有一个 UIImage View ，其中包含一个名为“logo”的蓝色图

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何在折叠位置启动 d3.js 树？