我尝试D3是为了好玩，出于某种原因，我无法在浏览器中渲染我的svg组件。检查控制台，我可以看到svg容器已经创建，但没有创建任何元素。
我正在从.json文件加载。如果我将数据打印到控制台，我可以看到.json文件中包含的所有内容，从而获得正确的数据。
我的HTML非常基本：
<!DOCTYPE html>
<html>
<head>
<title>D3 Test</title>
<script type="text/javascript" src="d3-min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="tree"></div>
<script>
importJsonData();
</script>
</body>
</html>
这是我的JS:
function importJsonData() {
d3.json("./test/test_data.json", function(data) {
console.log(data);
let canvas = d3.select("#tree").append("svg")
.attr("width", 1000)
.attr("height", 700)
canvas.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width", 50)
.attr("height", 50)
.attr("y", function (d, i)
{
return i * 50
})
.attr("fill", "green");
});
}
我可能对selectAll有错误的理解——我以为它会选择与过滤器匹配的所有元素，但如果你用enter((将数据归因于此，它会为每个元素创建一个组件。
感谢您的帮助。
您有一个语法错误，需要首先修复，根本没有附加SVG的
.attr("width", "50)
应该是
.attr("width", 50)
var data = [{id:1}, {id:2}, {id:3}];
drawData(data);
function drawData(data) {
console.log(data);
let canvas = d3.select("#tree").append("svg")
.attr("width", 1000)
.attr("height", 700)
canvas.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width", 50)
.attr("height", 50)
.attr("y", function (d, i) { return i * 50; })
.attr("fill", "green");
}<script src="https://d3js.org/d3.v5.min.js"></script>
<div id="tree"></div>