javascript - 无法使用 csv 文件附加到 d3 js 5 中的 svg
问题描述
看来我已从控制台正确加载数据并将 x 和 y 转换为数字，但我无法在页面上的 svg 中显示/附加任何内容。我已经查看了使用 Rstudio 的内置预览和使用 python 来托管本地服务器，但两者都不起作用，并且控制台日志中没有任何错误消息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Page Template</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<script type="text/javascript">
var w = 600;
var h = 600;
var svg = d3.select("body")
.append("svg")
//.attr("width", w)
//.attr("height", h);
.attr("viewBox", [0 , 0, w, h] );
var dataset = d3.csv('data.csv',
function(d) {
return {
id: d.id,
name: d.name,
x: +d.x,
y: +d.y
};
}).then(function(data) {
console.log(data);
});
var padding = 20;
var xScale = d3.scaleLinear()
.domain([d3.min(dataset, function(d) { return d.x; }),
d3.max(dataset, function(d) { return d.x; })])
.range([padding, w - padding]);
var yScale = d3.scaleLinear()
.domain([d3.min(dataset, function(d) { return d.y; }),
d3.max(dataset, function(d) { return d.y; })])
.range([h - padding, padding]);
var lights = svg.selectAll('circle')
.data(dataset)
.enter()
.append('circle')
.attr("cx", function (d) {
return xScale(d.x);
} )
.attr("cy", function (d) { return yScale(d.y); } )
.attr("r", 15)
.style("fill", "yellow")
.style("stroke", "grey")
});
var text = svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.attr("x", function (d) {
console.log(d.x);
return xScale(d.x);})
.attr("y", function (d) {return yScale(d.y) + 30;})
.text(function (d) {return d.name;})
.attr("font-size", "10px")
.attr('text-anchor', 'middle');
</script>
</body>
</html>