我正在尝试使用 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,如下面的屏幕截图中突出显示的那样:
如何解决?这只是一个示例,我有实际的 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/