javascript - imagen - Necesita otra ayuda para mostrar el texto en la pantalla de forma dinámica

tooltip jquery ui ejemplos

Question

Ahora tengo este segundo problema usando d3.js que no puedo resolver solo. Obtuve una "ruta" de matriz dinámica cuya longitud siempre cambia cuando hago clic en. Luego obtuve una variable de "texto" en una posición inicial en el svg (112, 490). Con la ayuda de ustedes, ahora uso el for-loop para mostrar los nombres de la matriz "ruta" en función de su longitud de conmutación en la consola y funcionó. Pero ahora quiero que los nombres aparezcan en la pantalla. Pero mi

 textNode.attr("dx", 112 + i*2);

la linea no funciona Quiero que el desplazamiento del texto en la escala X comience en el punto 112 un poco con cada nodo.

Este es el texto

var text = svg.append("text")
.attr("dx", 112)
.attr("dy", 490)
.text("1. Node: " )

y este es el bucle for

for (var i=0;i<path.length;i++) {
text.attr("dx", 112 + i*2);
text.text( +i+1+". Node: " + path[i].name);

Answer 1

No estoy seguro de si esto es incorrecto para su caso de uso específico, pero creo que quiere hacer "x" en lugar de "dx". Así es como moví objetos hacia la izquierda / derecha en d3.js:

textNode.attr("x", 112 + i*2);

EDIT: aquí hay un ejemplo que agrega objetos de texto y los mueve a la derecha según el índice:

for (var i = 0; i < path.length; i++) {
var text = svg.append("text")
.attr("x", 112 + i*2)
.attr("y", 490)
.text("1. Node: " )
}

EDIT2: Vea la respuesta de Gerardo. D3js tiene sus propios métodos para enlazar y recorrer datos.

Answer 2

Un principio muy básico en D3: no use bucles, como un bucle for , para mostrar o mostrar los datos (a veces usamos bucles, pero en situaciones muy específicas y complejas, no esta). En su otra pregunta, la solución propuesta usa bucles porque no había una etiqueta d3.js en la pregunta. Pero usar un ciclo como este tiene poco sentido si estás usando D3. Es una biblioteca completa creada para manipular datos, y estás ignorando su aspecto más importante.

En lugar de eso, vincula tus datos a una selección. En su caso, como su matriz cambia constantemente, necesitará una selección de "ingresar", "actualizar" y "salir".

Primero, une tus datos:

var texts = svg.selectAll(".texts")
.data(data);

Luego, configure las selecciones:

textsExit = texts.exit().remove();
textsEnter = texts.enter()
.append("text")
.attr("class", "texts");
textsUpdate = texts.merge(textsEnter)
.attr("x", 10)
.attr("y", (d, i) => i * 16)
.text(d => d.name);

Aquí hay una demostración para mostrarte cómo funciona. Tengo una matriz de datos, cuya longitud cambia cada segundo:

var svg = d3.select("body").append("svg");
var dataset = [{
name: "foo"
}, {
name: "bar"
}, {
name: "baz"
}, {
name: "lorem"
}, {
name: "ipsum"
}, {
name: "dolot"
}, {
name: "amet"
}];
print(dataset);
setInterval(()=> {
var data = dataset.slice(Math.random() * 6);
print(data);
}, 1000);
function print(data) {
var texts = svg.selectAll(".texts")
.data(data);
textsExit = texts.exit().remove();
textsEnter = texts.enter()
.append("text")
.attr("class", "texts");
textsUpdate = texts.merge(textsEnter).attr("x", 10)
.attr("y", (d, i) => 20 + i * 16)
.text((d,i) => "Node " + (i+1) + ", name: " + d.name);
}

<script src="https://d3js.org/d3.v4.min.js"></script>