我有包含高度、重量、半徑和顏色的 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 關注
- 185 瀏覽
添加回答
舉報
0/150
提交
取消