Компоненты d3 SVG не отображаются в Chrome
Я пробую 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.info(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 (), он создаст компонент для каждого элемента.
Любая помощь приветствуется.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
У вас есть синтаксическая ошибка, которую необходимо исправить, без добавления SVG
.attr("width", "50)
Должно быть
.attr("width", 50)
var data = [{id:1}, {id:2}, {id:3}];
drawData(data);
function drawData(data) {
console.info(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>@ Darnold14 Ради вашей проблемы не имеет значения, откуда берутся данные. rioV8 просто попытался поместить это в минимальный воспроизводимый пример, чтобы вы показали, что он работает. Суть этого ответа кроется в первых 4 строках: уберите кавычки, и все готово.
@altocumulus: Мне любопытно, какие у него будут требования и каков крайний срок выполнения задания.
Спасибо, но я надеялся получить данные из читаемого файла, а не из жестко запрограммированного массива.