gpt4 book ai didi

javascript - 在简单的 html 页面中安装 d3js 图形

转载 作者:太空宇宙 更新时间:2023-11-03 21:13:43 24 4
gpt4 key购买 nike

我正在尝试使用 here 中的示例,我的文件如下:

index.html

<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<meta charset="utf-8">
<style>

.node circle {
fill: #999;
}

.node text {
font: 10px sans-serif;
}

.node--internal circle {
fill: #555;
}

.node--internal text {
text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}

.link {
fill: none;
stroke: #555;
stroke-opacity: 0.4;
stroke-width: 1.5px;
}

html, body {
height: 100%;
}

html {
display: table;
margin: auto;
}

body {
display: table-cell;
vertical-align: middle;
}

</style>
</head>
<body>
<svg width="960" height="2000"></svg>
<script src="d3.js"></script>
<script>

var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
g = svg.append("g").attr("transform", "translate(40,0)");

var tree = d3.cluster()
.size([height, width - 160]);

var stratify = d3.stratify()
.parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });

d3.csv("test.csv", function(error, data) {
if (error) throw error;

var root = stratify(data)
.sort(function(a, b) { return (a.height - b.height) || a.id.localeCompare(b.id); });

tree(root);

var link = g.selectAll(".link")
.data(root.descendants().slice(1))
.enter().append("path")
.attr("class", "link")
.attr("d", function(d) {
return "M" + d.y + "," + d.x
+ "C" + (d.parent.y + 100) + "," + d.x
+ " " + (d.parent.y + 100) + "," + d.parent.x
+ " " + d.parent.y + "," + d.parent.x;
});

var node = g.selectAll(".node")
.data(root.descendants())
.enter().append("g")
.attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

node.append("circle")
.attr("r", 2.5);

node.append("text")
.attr("dy", 3)
.attr("x", function(d) { return d.children ? -8 : 8; })
.style("text-anchor", function(d) { return d.children ? "end" : "start"; })
.text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1); });
});

</script>
</body>
</html>

和测试.csv

id
country
country.USA
country.Canada
country.Russia
country.China
country.India
country.England
country.USA.Wisconsin
country.USA.Wisconsin.Madison
country.USA.Washington DC
country.Canada.Toronto
country.Canada.Ottawa
country.Russia.St Petersburg
country.India.Karnataka
country.India.Maharashtra
country.India.Delhi
country.India.Karnataka.Bangalore
country.India.Karnataka.Bangalore.city
country.India.Karnataka.Bangalore.rural
country.India.Karnataka.Mysore
country.India.Karnataka.Mangalore
country.India.Maharashtra.Mumbai
country.India.Maharashtra.Pune

结果输出切断了第一个节点,即不是 country,它只显示 country,如下面的屏幕截图中突出显示的那样: enter image description here

如何解决?这只是一个示例,我有实际的 csv,其中包含长度为 10 个字符的节点名称。如何自动调整最终输出。

最佳答案

您在其中定义了 g 的行,您可能只想增加 x 翻译。

g = svg.append("g").attr("transform", "translate(40,0)");

成为

g = svg.append("g").attr("transform", "translate(60,0)");

这会将包含整个可视化效果的组移动到一些额外的像素上。如果您想变得聪明一点,您实际上可以测量字符串“country”的长度并按该长度进行翻译。例如:

const countryText = g.append("g")
.attr("class", "node") //apply all the same classes to ensure css rules match
.append("text")
.text("country");

const width = countryText.node().getComputedTextLength()
g.attr("transform", `translate(${width}, 0)`);

服务器端:关于测量字符串的警告。这仅在具有浏览器的环境中受支持,这会使服务器端呈现(或使用 Node 之类的自动化测试)非常难以使用。

关于javascript - 在简单的 html 页面中安装 d3js 图形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44003988/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com