如何在 d3 中使用 CSV 高度、重量、半径和颜色创建圆圈
我有包含高度、重量、半径和颜色的 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
假设您的 company.csv 类似X、Y、半径100,20,10150,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
svg页面主体中没有元素。结果，d3.select("svg")返回一个空选择，因此圆圈不会附加到任何内容。通过在脚本之前添加以下内容来修复<body>：<svg width="800px" height="400px"></svg>
随时随地看视频慕课网APP
相关分类
Html5