如何将树布局更改为 v5？

Question

我想将下面链接中的树更改为 d3js v5。请注意，当前树处于 v3 中。我对 d3js v5 不熟悉:(我知道这里有很多专家。\n我已将此链接 codepen.io/augbog/pen/LEXZKK 中的脚本版本从 v3 更改为 v5。即，像这样，但它不会读取此命令“d3.layout.tree().nodeSize([70, 40]);”中的属性“tree”

\n\n

这是我正在使用的代码\n https://codepen.io/augbog/pen/LEXZKK

\n\n

       var i = 0,\n    duration = 750,\n    rectW = 60,\n    rectH = 30;\n\nvar tree = d3.layout.tree().nodeSize([70, 40]);\nvar diagonal = d3.svg.diagonal()\n    .projection(function (d) {\n    return [d.x + rectW / 2, d.y + rectH / 2];\n});\n\nvar svg = d3.select("#body").append("svg").attr("width", 1000).attr("height", 1000)\n    .call(zm = d3.behavior.zoom().scaleExtent([1,3]).on("zoom", redraw)).append("g")\n    .attr("transform", "translate(" + 350 + "," + 20 + ")");\n\n//necessary so that zoom knows where to zoom and unzoom from\nzm.translate([350, 20]);\n\nroot.x0 = 0;\nroot.y0 = height / 2;\n\nfunction collapse(d) {\n    if (d.children) {\n        d._children = d.children;\n        d._children.forEach(collapse);\n        d.children = null;\n    }\n}\n\nroot.children.forEach(collapse);\nupdate(root);\n\nd3.select("#body").style("height", "800px");\n\nfunction update(source) {\n\n    // Compute the new tree layout.\n    var nodes = tree.nodes(root).reverse(),\n        links = tree.links(nodes);\n\n    // Normalize for fixed-depth.\n    nodes.forEach(function (d) {\n        d.y = d.depth * 180;\n    });\n\n    // Update the nodes\xe2\x80\xa6\n    var node = svg.selectAll("g.node")\n        .data(nodes, function (d) {\n        return d.id || (d.id = ++i);\n    });\n\n    // Enter any new nodes at the parent\'s previous position.\n    var nodeEnter = node.enter().append("g")\n        .attr("class", "node")\n        .attr("transform", function (d) {\n        return "translate(" + source.x0 + "," + source.y0 + ")";\n    })\n        .on("click", click);\n\n    nodeEnter.append("rect")\n        .attr("width", rectW)\n        .attr("height", rectH)\n        .attr("stroke", "black")\n        .attr("stroke-width", 1)\n        .style("fill", function (d) {\n        return d._children ? "lightsteelblue" : "#fff";\n    });\n\n    nodeEnter.append("text")\n        .attr("x", rectW / 2)\n        .attr("y", rectH / 2)\n        .attr("dy", ".35em")\n        .attr("text-anchor", "middle")\n        .text(function (d) {\n        return d.name;\n    });\n\n    // Transition nodes to their new position.\n    var nodeUpdate = node.transition()\n        .duration(duration)\n        .attr("transform", function (d) {\n        return "translate(" + d.x + "," + d.y + ")";\n    });\n\n    nodeUpdate.select("rect")\n        .attr("width", rectW)\n        .attr("height", rectH)\n        .attr("stroke", "black")\n        .attr("stroke-width", 1)\n        .style("fill", function (d) {\n        return d._children ? "lightsteelblue" : "#fff";\n    });\n\n    nodeUpdate.select("text")\n        .style("fill-opacity", 1);\n\n    // Transition exiting nodes to the parent\'s new position.\n    var nodeExit = node.exit().transition()\n        .duration(duration)\n        .attr("transform", function (d) {\n        return "translate(" + source.x + "," + source.y + ")";\n    })\n        .remove();\n\n    nodeExit.select("rect")\n        .attr("width", rectW)\n        .attr("height", rectH)\n    //.attr("width", bbox.getBBox().width)""\n    //.attr("height", bbox.getBBox().height)\n    .attr("stroke", "black")\n        .attr("stroke-width", 1);\n\n    nodeExit.select("text");\n\n    // Update the links\xe2\x80\xa6\n    var link = svg.selectAll("path.link")\n        .data(links, function (d) {\n        return d.target.id;\n    });\n\n    // Enter any new links at the parent\'s previous position.\n    link.enter().insert("path", "g")\n        .attr("class", "link")\n        .attr("x", rectW / 2)\n        .attr("y", rectH / 2)\n        .attr("d", function (d) {\n        var o = {\n            x: source.x0,\n            y: source.y0\n        };\n        return diagonal({\n            source: o,\n            target: o\n        });\n    });\n\n    // Transition links to their new position.\n    link.transition()\n        .duration(duration)\n        .attr("d", diagonal);\n\n    // Transition exiting nodes to the parent\'s new position.\n    link.exit().transition()\n        .duration(duration)\n        .attr("d", function (d) {\n        var o = {\n            x: source.x,\n            y: source.y\n        };\n        return diagonal({\n            source: o,\n            target: o\n        });\n    })\n        .remove();\n\n    // Stash the old positions for transition.\n    nodes.forEach(function (d) {\n        d.x0 = d.x;\n        d.y0 = d.y;\n    });\n}\n\n// Toggle children on click.\nfunction click(d) {\n    if (d.children) {\n        d._children = d.children;\n        d.children = null;\n    } else {\n        d.children = d._children;\n        d._children = null;\n    }\n    update(d);\n}\n\n//Redraw for zoom\nfunction redraw() {\n  //console.log("here", d3.event.translate, d3.event.scale);\n  svg.attr("transform",\n      "translate(" + d3.event.translate + ")"\n      + " scale(" + d3.event.scale + ")");\n}  \n

\n

Answer 1

d3v5 和您当前的版本 (d3v3) 有几处更改。其中很多不向后兼容。

d3.layout.tree()自 d3v4 起无效。整个都d3.layout.layoutName被废除了。在d3v5中，正确的方法是使用d3.tree().nodeSize([w, h]).

有关更多信息，您应该查看v4 和 v5 的官方变更日志。还要检查并比较d3v5和d3v3中树的 API 参考。