我得到了 d3.js 代码来创建一棵树，我很高兴地完成了这件事，但我不知道如何开始折叠树。
\n\n我发现这篇文章解释了如何做到这一点，但它似乎对我的代码没有任何作用：Edit the javascript to switch the _children and children attributes for every node. This could be done like so
var treeData = [\r\n\r\n\r\n{\r\n "name": "Product",\r\n "parent": "null",\r\n "children": [\r\n\r\n <!-------------- BRANCH ----------->\t\r\n\r\n {\r\n "name": "Servers",\r\n "parent": "Top Level",\r\n "children": [{\r\n "name": "Options (Hard disk / RAM / PSU / Network cards etc)",\r\n "parent": "Servers"\r\n }, {\r\n "name": "Software licensing \xe2\x80\x93 Microsoft O/S?",\r\n "parent": "Servers"\r\n }, {\r\n "name": "Switching \xe2\x80\x93 HP / Cisco",\r\n "parent": "Servers"\r\n }, {\r\n "name": "UPS \xe2\x80\x93 APC",\r\n "parent": "Servers"\r\n }, {\r\n "name": "Cabling",\r\n "parent": "Servers"\r\n }, {\r\n "name": "Warranty \xe2\x80\x93 Ecare+ / HP Care Pack?",\r\n "parent": "Servers"\r\n }, {\r\n "name": "Engineer Installation \xe2\x80\x93 on-site / remote log-in?",\r\n "parent": "Servers"\r\n }, {\r\n "name": "Config centre \xe2\x80\x93 Build & test server and parts prior to delivery",\r\n "parent": "Servers"\r\n }, {\r\n "name": "Telephone support credits",\r\n "parent": "Servers"\r\n }\r\n\r\n ]\r\n },\r\n\r\n <!-------------- BRANCH ----------->\t\t \r\n\r\n {\r\n "name": "PC/Laptop/Workstation",\r\n "parent": "Top Level",\r\n "children": [{\r\n "name": "Monitor",\r\n "parent": "PC/Laptop/Workstation"\r\n }, {\r\n "name": "Docking Station",\r\n "parent": "PC/Laptop/Workstation"\r\n }, {\r\n "name": "Microsoft Office license",\r\n "parent": "PC/Laptop/Workstation"\r\n }, {\r\n "name": "Carry Case (laptop)",\r\n "parent": "PC/Laptop/Workstation"\r\n }, {\r\n "name": "Accessories \xe2\x80\x93 Mouse/Keyboard/Riser/Keylock",\r\n "parent": "PC/Laptop/Workstation"\r\n }, {\r\n "name": "Config centre \xe2\x80\x93 desktop imaging/adding 2nd HD or RAM",\r\n "parent": "PC/Laptop/Workstation"\r\n }, {\r\n "name": "On-site installation \xe2\x80\x93 desktop rollout",\r\n "parent": "PC/Laptop/Workstation"\r\n }, {\r\n "name": "Telephone Support credits",\r\n "parent": "PC/Laptop/Workstation"\r\n }\r\n\r\n ]\r\n },\r\n\r\n <!-------------- BRANCH ----------->\t\t \r\n\r\n {\r\n "name": "Switches",\r\n "parent": "Top Level",\r\n "children": [{\r\n "name": "SFP/Transceivers",\r\n "parent": "Switches"\r\n }, {\r\n "name": "Cables",\r\n "parent": "Switches"\r\n }, {\r\n "name": "Config Centre \xe2\x80\x93 pre-delivery config work",\r\n "parent": "Switches"\r\n }, {\r\n "name": "Network cards",\r\n "parent": "Switches"\r\n }, {\r\n "name": "On-site installation",\r\n "parent": "Switches"\r\n }\r\n\r\n ]\r\n },\r\n\r\n\r\n\r\n\r\n\r\n\r\n <!-------------- BRANCH ----------->\t \r\n\r\n\r\n\r\n <!-------------- END ----------->\t\r\n ]\r\n},\r\n\r\n];\r\n\r\n\r\n// ************** Generate the tree diagram\t *****************\r\nvar margin = {\r\n top: 20,\r\n right: 120,\r\n bottom: 20,\r\n left: 120\r\n},\r\nwidth = 960 - margin.right - margin.left,\r\n height = 500 - margin.top - margin.bottom;\r\n\r\nvar i = 0,\r\n duration = 750,\r\n root;\r\n\r\nvar tree = d3.layout.tree()\r\n .size([height, width]);\r\n\r\nvar diagonal = d3.svg.diagonal()\r\n .projection(function (d) {\r\n return [d.y, d.x];\r\n});\r\n\r\nvar svg = d3.select("body").append("svg")\r\n .attr("width", width + margin.right + margin.left)\r\n .attr("height", height + margin.top + margin.bottom)\r\n .append("g")\r\n .attr("transform", "translate(" + margin.left + "," + margin.top + ")");\r\n\r\nroot = treeData[0];\r\nroot.x0 = height / 2;\r\nroot.y0 = 0;\r\n\r\nupdate(root);\r\n\r\nd3.select(self.frameElement).style("height", "500px");\r\n\r\nfunction update(source) {\r\n\r\n // Compute the new tree layout.\r\n var nodes = tree.nodes(root).reverse(),\r\n links = tree.links(nodes);\r\n\r\n // Normalize for fixed-depth.\r\n nodes.forEach(function (d) {\r\n d.y = d.depth * 250;\r\n });\r\n\r\n // Update the nodes\xe2\x80\xa6\r\n var node = svg.selectAll("g.node")\r\n .data(nodes, function (d) {\r\n return d.id || (d.id = ++i);\r\n });\r\n\r\n // Enter any new nodes at the parent\'s previous position.\r\n var nodeEnter = node.enter().append("g")\r\n .attr("class", "node")\r\n .attr("transform", function (d) {\r\n return "translate(" + source.y0 + "," + source.x0 + ")";\r\n })\r\n .on("click", click);\r\n\r\n nodeEnter.append("circle")\r\n .attr("r", 1e-6)\r\n .style("fill", function (d) {\r\n return d._children ? "lightsteelblue" : "#fff";\r\n });\r\n\r\n nodeEnter.append("text")\r\n .attr("x", function (d) {\r\n return d.children || d._children ? -13 : 13;\r\n })\r\n .attr("dy", ".35em")\r\n .attr("text-anchor", function (d) {\r\n return d.children || d._children ? "end" : "start";\r\n })\r\n .text(function (d) {\r\n return d.name;\r\n })\r\n .style("fill-opacity", 1e-6);\r\n\r\n // Transition nodes to their new position.\r\n var nodeUpdate = node.transition()\r\n .duration(duration)\r\n .attr("transform", function (d) {\r\n return "translate(" + d.y + "," + d.x + ")";\r\n });\r\n\r\n nodeUpdate.select("circle")\r\n .attr("r", 10)\r\n .style("fill", function (d) {\r\n return d._children ? "lightsteelblue" : "#fff";\r\n });\r\n\r\n nodeUpdate.select("text")\r\n .style("fill-opacity", 1);\r\n\r\n // Transition exiting nodes to the parent\'s new position.\r\n var nodeExit = node.exit().transition()\r\n .duration(duration)\r\n .attr("transform", function (d) {\r\n return "translate(" + source.y + "," + source.x + ")";\r\n })\r\n .remove();\r\n\r\n nodeExit.select("circle")\r\n .attr("r", 1e-6);\r\n\r\n nodeExit.select("text")\r\n .style("fill-opacity", 1e-6);\r\n\r\n // Update the links\xe2\x80\xa6\r\n var link = svg.selectAll("path.link")\r\n .data(links, function (d) {\r\n return d.target.id;\r\n });\r\n\r\n // Enter any new links at the parent\'s previous position.\r\n link.enter().insert("path", "g")\r\n .attr("class", "link")\r\n .attr("d", function (d) {\r\n var o = {\r\n x: source.x0,\r\n y: source.y0\r\n };\r\n return diagonal({\r\n source: o,\r\n target: o\r\n });\r\n });\r\n\r\n // Transition links to their new position.\r\n link.transition()\r\n .duration(duration)\r\n .attr("d", diagonal);\r\n\r\n // Transition exiting nodes to the parent\'s new position.\r\n link.exit().transition()\r\n .duration(duration)\r\n .attr("d", function (d) {\r\n var o = {\r\n x: source.x,\r\n y: source.y\r\n };\r\n return diagonal({\r\n source: o,\r\n target: o\r\n });\r\n })\r\n .remove();\r\n\r\n // Stash the old positions for transition.\r\n nodes.forEach(function (d) {\r\n d.x0 = d.x;\r\n d.y0 = d.y;\r\n });\r\n}\r\n\r\n// Toggle children on click.\r\nfunction click(d) {\r\n if (d.children) {\r\n d._children = d.children;\r\n d.children = null;\r\n } else {\r\n d.children = d._children;\r\n d._children = null;\r\n }\r\n update(d);\r\n}\t.node {\r\n\t cursor: pointer;\r\n\t}\r\n\t.node circle {\r\n\t fill: #fff;\r\n\t stroke: steelblue;\r\n\t stroke-width: 3px;\r\n\t}\r\n\t.node text {\r\n\t font: 12px sans-serif;\r\n\t background-color:##\r\n\t}\r\n\t.link {\r\n\t fill: none;\r\n\t stroke: #ccc;\r\n\t stroke-width: 2px;\r\n\t}\r\n\t<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.4/d3.min.js"></script>需要更改的只是children根节点_children。
var treeData = [\r\n{\r\n "name": "Product",\r\n "parent": "null",\r\n "_children": [\r\n\r\n <!-------------- BRANCH ----------->\t\r\n\r\n {\r\n "name": "Servers",\r\n "parent": "Top Level",\r\n "_children": [{\r\n "name": "Options (Hard disk / RAM / PSU / Network cards etc)",\r\n "parent": "Servers"\r\n }, {\r\n "name": "Software licensing \xe2\x80\x93 Microsoft O/S?",\r\n "parent": "Servers"\r\n }, {\r\n "name": "Switching \xe2\x80\x93 HP / Cisco",\r\n "parent": "Servers"\r\n }, {\r\n "name": "UPS \xe2\x80\x93 APC",\r\n "parent": "Servers"\r\n }, {\r\n "name": "Cabling",\r\n "parent": "Servers"\r\n }, {\r\n "name": "Warranty \xe2\x80\x93 Ecare+ / HP Care Pack?",\r\n "parent": "Servers"\r\n }, {\r\n "name": "Engineer Installation \xe2\x80\x93 on-site / remote log-in?",\r\n "parent": "Servers"\r\n }, {\r\n "name": "Config centre \xe2\x80\x93 Build & test server and parts prior to delivery",\r\n "parent": "Servers"\r\n }, {\r\n "name": "Telephone support credits",\r\n "parent": "Servers"\r\n }\r\n\r\n ]\r\n },\r\n\r\n <!-------------- BRANCH ----------->\t\t \r\n\r\n {\r\n "name": "PC/Laptop/Workstation",\r\n "parent": "Top Level",\r\n "_children": [{\r\n "name": "Monitor",\r\n "parent": "PC/Laptop/Workstation"\r\n }, {\r\n "name": "Docking Station",\r\n "parent": "PC/Laptop/Workstation"\r\n }, {\r\n "name": "Microsoft Office license",\r\n "parent": "PC/Laptop/Workstation"\r\n }, {\r\n "name": "Carry Case (laptop)",\r\n "parent": "PC/Laptop/Workstation"\r\n }, {\r\n "name": "Accessories \xe2\x80\x93 Mouse/Keyboard/Riser/Keylock",\r\n "parent": "PC/Laptop/Workstation"\r\n }, {\r\n "name": "Config centre \xe2\x80\x93 desktop imaging/adding 2nd HD or RAM",\r\n "parent": "PC/Laptop/Workstation"\r\n }, {\r\n "name": "On-site installation \xe2\x80\x93 desktop rollout",\r\n "parent": "PC/Laptop/Workstation"\r\n }, {\r\n "name": "Telephone Support credits",\r\n "parent": "PC/Laptop/Workstation"\r\n }\r\n\r\n ]\r\n },\r\n\r\n <!-------------- BRANCH ----------->\t\t \r\n\r\n {\r\n "name": "Switches",\r\n "parent": "Top Level",\r\n "_children": [{\r\n "name": "SFP/Transceivers",\r\n "parent": "Switches"\r\n }, {\r\n "name": "Cables",\r\n "parent": "Switches"\r\n }, {\r\n "name": "Config Centre \xe2\x80\x93 pre-delivery config work",\r\n "parent": "Switches"\r\n }, {\r\n "name": "Network cards",\r\n "parent": "Switches"\r\n }, {\r\n "name": "On-site installation",\r\n "parent": "Switches"\r\n }\r\n\r\n ]\r\n },\r\n <!-------------- BRANCH ----------->\t \r\n\r\n <!-------------- END ----------->\t\r\n ]\r\n},\r\n];\r\n\r\n\r\n// ************** Generate the tree diagram\t *****************\r\nvar margin = {\r\n top: 20,\r\n right: 120,\r\n bottom: 20,\r\n left: 120\r\n},\r\nwidth = 960 - margin.right - margin.left,\r\n height = 500 - margin.top - margin.bottom;\r\n\r\nvar i = 0,\r\n duration = 750,\r\n root;\r\n\r\nvar tree = d3.layout.tree()\r\n .size([height, width]);\r\n\r\nvar diagonal = d3.svg.diagonal()\r\n .projection(function (d) {\r\n return [d.y, d.x];\r\n});\r\n\r\nvar svg = d3.select("body").append("svg")\r\n .attr("width", width + margin.right + margin.left)\r\n .attr("height", height + margin.top + margin.bottom)\r\n .append("g")\r\n .attr("transform", "translate(" + margin.left + "," + margin.top + ")");\r\n\r\nroot = treeData[0];\r\nroot.x0 = height / 2;\r\nroot.y0 = 0;\r\n\r\nupdate(root);\r\n\r\nd3.select(self.frameElement).style("height", "500px");\r\n\r\nfunction update(source) {\r\n\r\n // Compute the new tree layout.\r\n var nodes = tree.nodes(root).reverse(),\r\n links = tree.links(nodes);\r\n\r\n // Normalize for fixed-depth.\r\n nodes.forEach(function (d) {\r\n d.y = d.depth * 250;\r\n });\r\n\r\n // Update the nodes\xe2\x80\xa6\r\n var node = svg.selectAll("g.node")\r\n .data(nodes, function (d) {\r\n return d.id || (d.id = ++i);\r\n });\r\n\r\n // Enter any new nodes at the parent\'s previous position.\r\n var nodeEnter = node.enter().append("g")\r\n .attr("class", "node")\r\n .attr("transform", function (d) {\r\n return "translate(" + source.y0 + "," + source.x0 + ")";\r\n })\r\n .on("click", click);\r\n\r\n nodeEnter.append("circle")\r\n .attr("r", 1e-6)\r\n .style("fill", function (d) {\r\n return d._children ? "lightsteelblue" : "#fff";\r\n });\r\n\r\n nodeEnter.append("text")\r\n .attr("x", function (d) {\r\n return d.children || d._children ? -13 : 13;\r\n })\r\n .attr("dy", ".35em")\r\n .attr("text-anchor", function (d) {\r\n return d.children || d._children ? "end" : "start";\r\n })\r\n .text(function (d) {\r\n return d.name;\r\n })\r\n .style("fill-opacity", 1e-6);\r\n\r\n // Transition nodes to their new position.\r\n var nodeUpdate = node.transition()\r\n .duration(duration)\r\n .attr("transform", function (d) {\r\n return "translate(" + d.y + "," + d.x + ")";\r\n });\r\n\r\n nodeUpdate.select("circle")\r\n .attr("r", 10)\r\n .style("fill", function (d) {\r\n return d._children ? "lightsteelblue" : "#fff";\r\n });\r\n\r\n nodeUpdate.select("text")\r\n .style("fill-opacity", 1);\r\n\r\n // Transition exiting nodes to the parent\'s new position.\r\n var nodeExit = node.exit().transition()\r\n .duration(duration)\r\n .attr("transform", function (d) {\r\n return "translate(" + source.y + "," + source.x + ")";\r\n })\r\n .remove();\r\n\r\n nodeExit.select("circle")\r\n .attr("r", 1e-6);\r\n\r\n nodeExit.select("text")\r\n .style("fill-opacity", 1e-6);\r\n\r\n // Update the links\xe2\x80\xa6\r\n var link = svg.selectAll("path.link")\r\n .data(links, function (d) {\r\n return d.target.id;\r\n });\r\n\r\n // Enter any new links at the parent\'s previous position.\r\n link.enter().insert("path", "g")\r\n .attr("class", "link")\r\n .attr("d", function (d) {\r\n var o = {\r\n x: source.x0,\r\n y: source.y0\r\n };\r\n return diagonal({\r\n source: o,\r\n target: o\r\n });\r\n });\r\n\r\n // Transition links to their new position.\r\n link.transition()\r\n .duration(duration)\r\n .attr("d", diagonal);\r\n\r\n // Transition exiting nodes to the parent\'s new position.\r\n link.exit().transition()\r\n .duration(duration)\r\n .attr("d", function (d) {\r\n var o = {\r\n x: source.x,\r\n y: source.y\r\n };\r\n return diagonal({\r\n source: o,\r\n target: o\r\n });\r\n })\r\n .remove();\r\n\r\n // Stash the old positions for transition.\r\n nodes.forEach(function (d) {\r\n d.x0 = d.x;\r\n d.y0 = d.y;\r\n });\r\n}\r\n\r\n// Toggle children on click.\r\nfunction click(d) {\r\n if (d.children) {\r\n d._children = d.children;\r\n d.children = null;\r\n } else {\r\n d.children = d._children;\r\n d._children = null;\r\n }\r\n update(d);\r\n}\t.node {\r\n\t cursor: pointer;\r\n\t}\r\n\t.node circle {\r\n\t fill: #fff;\r\n\t stroke: steelblue;\r\n\t stroke-width: 3px;\r\n\t}\r\n\t.node text {\r\n\t font: 12px sans-serif;\r\n\t background-color:##\r\n\t}\r\n\t.link {\r\n\t fill: none;\r\n\t stroke: #ccc;\r\n\t stroke-width: 2px;\r\n\t}\r\n\t<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>\r\n<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>请注意，您可能需要全屏截图才能查看其结果。
\n