时间戳

首页 > 解决方案 > 径向树状图上未显示数据

javascript - 径向树状图上未显示数据

问题描述

我正在尝试使用径向树状图来显示我的数据。但它没有显示任何数据。 https://observablehq.com/@d3/radial-dendrogram

我已经创建了使用上述链接代码的 HTML 和 javascript 文件。但是什么都没有显示。当我删除代码的最后一部分，即 svg.remove 时，角落处显示了一些东西。请指导我它将如何工作？

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Minimal D3 Example</title>
   <script src="https://d3js.org/d3.v5.js" charset="utf-8"></script>
   <script src="https://d3js.org/d3-hierarchy.v1.min.js"></script>
   <script src="https://d3js.org/d3-path.v1.min.js"></script>
   <script src="https://d3js.org/d3-shape.v1.min.js"></script>
   <script>
       var tree = d3.tree();
   </script>
</head>
<body>
 <h1>This is a Test Graph</h1>
 <script src="data.js" charset="utf-8"></script>
 <script src="code.js" charset="utf-8"></script>
 </body>
</html>

const root = tree(d3.hierarchy(data)
  .sort((a, b) => (a.height - b.height) ||    
  a.data.name.localeCompare(b.data.name)));

const svg = d3.select("body")
  .append("svg")
  .attr("width", "932")
  .attr("height", "932")
  .style("padding", "10px")
  .style("box-sizing", "border-box")
  .style("font", "10px sans-serif");

const g = svg.append("g");

const link = g.append("g")
  .attr("fill", "none")
  .attr("stroke", "#555")
  .attr("stroke-opacity", 0.4)
  .attr("stroke-width", 1.5)
.selectAll("path")
.data(root.links())
.enter().append("path")
  .attr("d", d3.linkRadial()
      .angle(d => d.x)
      .radius(d => d.y));

const node = g.append("g")
  .attr("stroke-linejoin", "round")
  .attr("stroke-width", 3)
.selectAll("g")
.data(root.descendants().reverse())
.enter().append("g")
  .attr("transform", d => `
    rotate(${d.x * 180 / Math.PI - 90})
    translate(${d.y},0)
  `);

node.append("circle")
  .attr("fill", d => d.children ? "#555" : "#999")
  .attr("r", 2.5);

node.append("text")
  .attr("dy", "0.31em")
  .attr("x", d => d.x < Math.PI === !d.children ? 6 : -6)
  .attr("text-anchor", d => d.x < Math.PI === !d.children ? "start" : 
"end")
  .attr("transform", d => d.x >= Math.PI ? "rotate(180)" : null)
  .text(d => d.data.name)
  .filter(d => d.children)
  .clone(true).lower()
  .attr("stroke", "white");

 document.body.appendChild(svg.node());

 const box = g.node().getBBox();


 svg.remove()
 .attr("width", box.width)
 .attr("height", box.height)
 .attr("viewBox", `${box.x} ${box.y} ${box.width} ${box.height}`);

标签： javascriptd3.jssvg

解决方案

我注意到您的代码缺少一些变量tree、radius和height。

请记住将它们包含在您的 javascript 文件中，因为它们是渲染树所必需的。您可以将我给出的值替换width为适合您的用例的任何其他值。此外，您没有为要渲染的树包含任何数据。

const width = 932;
const radius = width / 2;
const tree = d3.cluster().size([2 * Math.PI, radius - 100]);

此外，您可以删除这段代码，因为它们不是必需的。

// remove the below 

document.body.appendChild(svg.node());

const box = g.node().getBBox();


svg.remove()
 .attr("width", box.width)
 .attr("height", box.height)
 .attr("viewBox", `${box.x} ${box.y} ${box.width} ${box.height}`);

你可以参考这里的演示。我使用了来自https://observablehq.com/@d3/radial-dendrogram的数据来渲染树状图。

推荐阅读