Я начинаю с d3.js и пытаюсь создать строку узлов, каждая из которых содержит метку с центрированным номером.
Я могу визуально получить желаемый результат, но способ, которым я это сделал, вряд ли оптимален, поскольку он включает жесткое кодирование координат x-y для каждого текстового элемента. Ниже приведен код:
var svg_w = 800;
var svg_h = 400;
var svg = d3.select("body")
.append("svg")
.attr("width", svg_w)
.attr("weight", svg_h);
var dataset = [];
for (var i = 0; i < 6; i++) {
var datum = 10 + Math.round(Math.random() * 20);
dataset.push(datum);
}
var nodes = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("class", "node")
.attr("cx", function(d, i) {
return (i * 70) + 50;
})
.attr("cy", svg_h / 2)
.attr("r", 20);
var labels = svg.append("g")
.attr("class", "labels")
.selectAll("text")
.data(dataset)
.enter()
.append("text")
.attr("dx", function(d, i) {
return (i * 70) + 42
})
.attr("dy", svg_h / 2 + 5)
.text(function(d) {
return d;
});
Класс node
- это пользовательский класс CSS, который я определил отдельно для элементов circle
, тогда как классы nodes
и labels
явно не определены и заимствованы из этого ответ.
Как видно, позиционирование каждой текстовой метки жестко закодировано так, что оно появляется в центре каждого node. Очевидно, это неправильное решение.
Мой вопрос заключается в том, как я должен правильно связать каждую текстовую метку с каждым кругом node динамически, так что если позиционирование метки меняется вместе с позицией круга автоматически. Концептуальное объяснение чрезвычайно приветствуется с примером кода.