我正在尝试使用径向树状图来显示我的数据。但它没有显示任何数据。 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/