个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 19:34:58 25 4
gpt4 key购买 nike

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

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

<!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}`);

最佳答案

我注意到您的代码缺少一些变量，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}`);

您可以引用 here 上的演示.我使用了来自 https://observablehq.com/@d3/radial-dendrogram 的数据渲染树状图。

关于javascript - 径向树状图上未显示数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56041659/

25 4 0
文章推荐： c - 具有指针转换的局部变量
文章推荐： C# 使用河豚 NET : How to convert from Uint32[] to byte[] 时出现问题
文章推荐： c - postgresql解析器将表名放在哪里？
文章推荐： c# - 我的域模型中的图像应该使用什么数据类型？
行者123
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com