D3 v5 徑向樹/簇

Question

此處的目標是使用在 d3 的最新版本中引入的新.linkHorizontal()函數使 d3 v3 徑向樹圖適應 v5。 這是硬編碼數據的片段：

 var margins = {top:20, bottom:300, left:30, right:100}; var height = 600; var width = 900; var totalWidth = width+margins.left+margins.right; var totalHeight = height+margins.top+margins.bottom; var svg = d3.select('body') .append('svg') .attr('width', totalWidth) .attr('height', totalHeight); var graphGroup = svg.append('g') .attr('transform', "translate("+margins.left+","+margins.top+")"); var root = {"name" : "Araneae", "children" : [ {"name" : "Agelenidae", "children" : [ {"name" : "Hobo Spider"}, {"name" : "Giant House Spider"}, {"name" : "Domestic House Spider"}, {"name" : "Dust Spider"} ] }, {"name" : "Araneidae", "children" : [ {"name" : "Grass Spider"}, {"name" : "Cross Orb Weaver"}, {"name" : "Banded Garden Spider"}, {"name" : "Golden Orb Weaver Spider"}, {"name" : "Long-Jawed Orb Weaver Spider"} ] }, {"name" : "Ctenidae", "children" : [ {"name" : "Brazilian Wandering Spider"}, {"name" : "Fishing Spider"} ] }, {"name" : "Desidae", "children" : [ {"name" : "Black House Spider"}, {"name" : "Brown House Spider"}, {"name" : "Hollow Twig Spider"} ] }, {"name" : "Filistatidae", "children" : [ {"name" : "Southern House Spider"}, {"name" : "Arizona Black Hole Spider"} ] }, {"name" : "Lycosidae", "children" : [ {"name" : "Carolina Wolf Spider"}, {"name" : "Brown Wolf Spider"}, {"name" : "Texas Wolf Spider"} ] }, {"name" : "Pholcidae", "children": [ {"name" : "Cellar Spider"}, {"name" : "Yellow Sac Spider"}, {"name" : "Ground Spider"}, {"name" : "Banded Garden Spider"} ] }, {"name" : "Salticidae", "children": [ {"name" : "Bold Jumping Spider"}, {"name" : "Zebra Jumping Spider"}, {"name" : "Gray Wall Jumping Spider"} ] }, {"name" : "Sicariidae", "children": [ {"name" : "Brown Spider"}, {"name" : "Brown Recluse Spider"} ] }, {"name" : "Theraphosidae", "children": [ {"name" : "King Baboon Spider"}, {"name" : "Bird Eating Spider"}, {"name" : "Pinktoe Tarantula Spider"}, {"name" : "Indian Ornamental Tree Spider"} ] }, {"name" : "Theridiidae", "children": [ {"name" : "Black Widow Spider"}, {"name" : "Brown Widow Spider"}, {"name" : "Red Widow Spider"} ] } ]}; var diameter = 760; var tree = d3.tree() .size([360, diameter / 2 - 190]) .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; }); var diagonal = function link(d) { return "M" + d.source.y + "," + d.source.x + "C" + (d.source.y + d.target.y) / 2 + "," + d.source.x + " " + (d.source.y + d.target.y) / 2 + "," + d.target.x + " " + d.target.y + "," + d.target.x; }; const treeRoot = d3.hierarchy(root) d3.tree(treeRoot) const nodes = treeRoot.descendants() const links = treeRoot.links() var link = graphGroup.selectAll(".link") .data(links) .enter().append("path") .attr("class", "link") .attr("d", diagonal); var node = graphGroup.selectAll(".node") .data(nodes) .enter().append("g") .attr("class", "node") .attr("transform", function(d) { return "rotate(" + (dx - 90) + ")translate(" + dy + ")"; }) node.append("circle") .attr("r", 5); node.append("text") .attr("dy", ".31em") .attr("text-anchor", function(d) { return dx < 180 ? "start" : "end"; }) .attr("transform", function(d) { return dx < 180 ? "translate(8)" : "rotate(180)translate(-8)"; }) .text(function(d) { return d.name; }); d3.select(self.frameElement).style("height", diameter - 150 + "px");

 <script src="https://d3js.org/d3.v5.min.js"></script>

這給了我錯誤：

錯誤：路徑屬性 d：預期數字，“Mundefined，undefin...”

原始 v3 版本在這里：

http://bl.ocks.org/nlinc1905/66ea5dd294ed28385b7f

如您所見，v3 版本沒有問題，但是，我無法讓它在 v5 上工作——即使按照d3js進行了更改tree.nodes() is not a function 。 即：

var tree = d3.tree()
    .size([360, diameter / 2 - 190])
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
var diagonal = function link(d) {
  return "M" + d.source.y + "," + d.source.x
      + "C" + (d.source.y + d.target.y) / 2 + "," + d.source.x
      + " " + (d.source.y + d.target.y) / 2 + "," + d.target.x
      + " " + d.target.y + "," + d.target.x;
};


const treeRoot = d3.hierarchy(root)
d3.tree(treeRoot)

const nodes = treeRoot.descendants()

const links = treeRoot.links()

也嘗試過（根據評論）：

var treeRoot = d3.hierarchy(root);

treeRoot = d3.tree(treeRoot);

題

我的 v5 徑向樹語法有什么問題，我該如何解決？

Answer 1

嗯，這沒有得到回答，因為它有幾個問題（層次結構、徑向投影、樣式線）。 下面解決了，我想這就是它的意思（可能需要調整標簽）：

 var margins = {top:20, bottom:300, left:30, right:100}; var height = 600; var width = 900; var totalWidth = width+margins.left+margins.right; var totalHeight = height+margins.top+margins.bottom; var svg = d3.select('body') .append('svg') .attr('width', totalWidth) .attr('height', totalHeight); var graphGroup = svg.append('g') .attr('transform', "translate("+(width/2-margins.left)+","+(height/2-margins.top)+")"); var root = {"name" : "Araneae", "children" : [ {"name" : "Agelenidae", "children" : [ {"name" : "Hobo Spider"}, {"name" : "Giant House Spider"}, {"name" : "Domestic House Spider"}, {"name" : "Dust Spider"} ] }, {"name" : "Araneidae", "children" : [ {"name" : "Grass Spider"}, {"name" : "Cross Orb Weaver"}, {"name" : "Banded Garden Spider"}, {"name" : "Golden Orb Weaver Spider"}, {"name" : "Long-Jawed Orb Weaver Spider"} ] }, {"name" : "Ctenidae", "children" : [ {"name" : "Brazilian Wandering Spider"}, {"name" : "Fishing Spider"} ] }, {"name" : "Desidae", "children" : [ {"name" : "Black House Spider"}, {"name" : "Brown House Spider"}, {"name" : "Hollow Twig Spider"} ] }, {"name" : "Filistatidae", "children" : [ {"name" : "Southern House Spider"}, {"name" : "Arizona Black Hole Spider"} ] }, {"name" : "Lycosidae", "children" : [ {"name" : "Carolina Wolf Spider"}, {"name" : "Brown Wolf Spider"}, {"name" : "Texas Wolf Spider"} ] }, {"name" : "Pholcidae", "children": [ {"name" : "Cellar Spider"}, {"name" : "Yellow Sac Spider"}, {"name" : "Ground Spider"}, {"name" : "Banded Garden Spider"} ] }, {"name" : "Salticidae", "children": [ {"name" : "Bold Jumping Spider"}, {"name" : "Zebra Jumping Spider"}, {"name" : "Gray Wall Jumping Spider"} ] }, {"name" : "Sicariidae", "children": [ {"name" : "Brown Spider"}, {"name" : "Brown Recluse Spider"} ] }, {"name" : "Theraphosidae", "children": [ {"name" : "King Baboon Spider"}, {"name" : "Bird Eating Spider"}, {"name" : "Pinktoe Tarantula Spider"}, {"name" : "Indian Ornamental Tree Spider"} ] }, {"name" : "Theridiidae", "children": [ {"name" : "Black Widow Spider"}, {"name" : "Brown Widow Spider"}, {"name" : "Red Widow Spider"} ] } ]}; function radialPoint(x, y) { // returns radial projections of a point coordinates return [parseFloat((y = +y) * Math.cos(x -= Math.PI / 2)).toFixed(4), parseFloat(y * Math.sin(x)).toFixed(4)]; } var diameter = 760; var hierTree = d3.tree() .size([360, diameter / 2 - 190]) .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; }); var diagonal = function link(d) { return "M" + dx + "," + dy + "C" + (dx + d.parent.x) / 2 + "," + dy + " " + (dx + d.parent.x) / 2 + "," + d.parent.y + " " + d.parent.x + "," + d.parent.y; }; var treeRoot = d3.hierarchy(root, function(d) { // creates a hierarchy from data read return d.children; }); var treeData = hierTree(treeRoot); // var treeData = d3.tree(treeRoot) var nodes = treeData.descendants(); var links = nodes.slice(1); var link = graphGroup.selectAll(".link") .data(links) .enter().append("line") .attr("class", "link") .attr("x1", function(d) { return radialPoint(dx,dy)[0]; }) .attr("y1", function(d) { return radialPoint(dx,dy)[1]; }) .attr("x2", function(d) { return radialPoint(d.parent.x,d.parent.y)[0]; }) .attr("y2", function(d) { return radialPoint(d.parent.x,d.parent.y)[1]; }) var node = graphGroup.selectAll(".node") .data(nodes) .enter().append("g") .attr("class", "node") .attr("transform", function(d) { return "translate(" + radialPoint(dx, dy) + ")" }); node.append("circle") .attr("r", 5); node.append("text") .attr("dy", ".31em") .attr("text-anchor", function(d) { return (dx > 0 && dx < 180) ? "start" : "end"; }) .attr("transform", function(d) { return dx < 180 ? "translate(8)" : "translate(-8)"; }) .text(function(d) { return d.data.name; }); d3.select(self.frameElement).style("height", diameter - 150 + "px");

 .link { fill: none; stroke: #365CB7; stroke-width: 0.8px; }

 <script src="https://d3js.org/d3.v5.min.js"></script>

在了解腳本工作后，我已將對角線函數留待重用。