Я пробую 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 (), он создаст компонент для каждогоэлемент.
Любая помощь приветствуется.