我有包含高度、重量、半径和颜色的 CSV 数据。我正在尝试使用这些数据制作圆圈，但什么也没得到（白色窗口）这是代码：<script src="https://d3js.org/d3.v5.min.js"></script><!DOCTYPE HTML><HTML><head> <meta charset="utf-8" /> <title>companies</title> <style> svg { background-color: gray; height: 400px; width: 800px; }</style></head><body><script> d3.csv("company.csv", function (the_data) {build_viz(the_data);}); function build_viz(the_data) { d3.select("svg") .selectAll("circles") .data(the_data) .enter() .append('circle') .attr('cx', function (d) { return d.X; }) .attr('cy', function (d) { return d.Y; }) .attr('r', function (d) { return d.radius; }) .style("background-color", function (d) { return d.color; }); } </script></body>你知道这里缺少什么吗？谢谢你！
2 回答
POPMUISE
TA贡献1765条经验 获得超5个赞
假设您的 company.csv 类似
X、Y、半径
100,20,10
150,80,10
<!DOCTYPE HTML>
<HTML>
<head>
<meta charset="utf-8" />
<title>companies</title>
<style>
.svg {
background-color: gray;
height: 400px;
width: 800px;
}
</style>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<svg class='svg'></svg>
<script>
d3.csv('./company.csv', function (the_data) {
console.log("X", the_data.X)
console.log("radius", the_data.radius)
build_viz(the_data);
});
function build_viz(the_data) {
d3.select('.svg')
.append("circle")
.attr("cx", the_data.X)
.attr("cy", the_data.Y)
.attr("r", the_data.radius)
.attr('fill', 'red')
}
</script>
</body>
输出：
Qyouu
TA贡献1786条经验 获得超11个赞
svg页面主体中没有元素。
结果，d3.select("svg")返回一个空选择，因此圆圈不会附加到任何内容。
通过在脚本之前添加以下内容来修复<body>：
<svg width="800px" height="400px"></svg>
- 2 回答
- 0 关注
- 113 浏览
添加回答
举报
0/150
提交
取消