Estoy empezando con d3.js y estoy intentando crear una fila de nodos, cada uno de los cuales contiene una etiqueta de número centrado.Colocación de etiquetas en el centro de los nodos en d3.js
Soy capaz de producir el resultado deseado visualmente, pero la forma en que lo hice no es óptima, ya que implica la codificación rigurosa de las coordenadas x y para cada elemento de texto. A continuación se muestra el código:
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;
});
El node
clase es la clase CSS personalizado He definido por separado para los elementos circle
, mientras que las clases nodes
y labels
no están explícitamente definidos y que son tomados de esta answer.
Como se ve, el posicionamiento de cada etiqueta de texto está codificado de manera que aparece en el centro de cada nodo. Obviamente, esta no es la solución correcta.
Mi pregunta es cómo debería asociar correctamente cada etiqueta de texto con cada círculo de nodo dinámicamente de modo que si el posicionamiento de una etiqueta cambia junto con el de un círculo automáticamente. La explicación conceptual es extremadamente bienvenida con un ejemplo de código.
anclajes de texto parecen no funcionar directamente en D3 aún, pero sí que ha intentado algo tan simple como CSS text-align? ¡Esto debería funcionar! http://www.w3schools.com/cssref/pr_text_text-align.asp También intente echar un vistazo a publicaciones como estas del grupo de Google d3: https://groups.google.com/forum/#!searchin/d3 -js/text-align/d3-js/M6a-97ajkWs/rHJV4_WrhX0J% 5B1-25% 5D – paxRoman
¿De dónde sacas la idea de que los anclajes de texto no funcionan en d3? –
hace unos meses no funcionó ... gracias por aclarar :) bueno ver un enfoque simple para este problema – paxRoman