Код выдаёт ошибку, не могу понять ,что не так с ним(
SyntaxError: Identifier 'width' has already been declared
at dn (:16:5449)
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Конструктор дерева с использованием d3.js</title>
<meta charset="utf-8">
</head>
<body>
<script src = "d3.min.js"></script>
<script>
// Первым делом необходимо определить некоторые константы, которые будут использоваться для создания дерева
const width = 500; // Ширина окна дерева
const height = 500; // Высота окна дерева
const svg = d3.select("body") // Выбираем блок body в HTML-документе
.append("svg") // Добавляем новый элемент svg
.attr("width", width) // Задаем ширину окна
.attr("height", height); // Задаем высоту окна
// Затем создадим дерево с помощью метода tree()
const tree = d3.tree(); // Задаем размеры окна для дерева
// Теперь мы можем загрузить наши данные и обработать их
d3.json("data.json", function(error, data) {
if (error) {
// В случае ошибки можно выбросить исключение, вывести сообщение в консоль или сделать что-то еще
throw error;
}
// Здесь может быть код, который будет выполнен, если данные успешно загружены
// После загрузки данных мы можем начать создавать дерево
// Сначала преобразуем данные в формат, который может быть использован методом tree()
const treeData = tree(d3.hierarchy(data));
// Теперь мы можем добавить узлы и связи между ними на нашу канву SVG
// Добавим узлы в виде кружков
const nodes = svg.selectAll(".node")
.data(treeData.descendants())
.enter()
.append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
nodes.append("circle")
.attr("r", 10)
.style("fill", "#fff")
.style("stroke", "#000");
// Добавим текстовые метки для каждого узла
nodes.append("text")
.attr("dy", ".35em")
.attr("y", function(d) {
return d.children ? -20 : 20;
})
.style("text-anchor", "middle")
.text(function(d) {
return d.data.name;
});
// Добавим связи между узлами
svg.selectAll(".link")
.data(treeData.links())
.enter()
.append("path")
.attr("class", "link")
.attr("d", d3.linkHorizontal()
.x(function(d) {
return d.x;
})
.y(function(d) {
return d.y;
}));
}); </script>
</body>
</html>
