Trazar el nombre de los estados en el mapa usando Node js y D3 en tiempo real

He estado tratando de trazar los nombres de los estados en el mapa usando Redis Pub / Sub system, Node js y D3. El problema es que cuando escribo en un estado por primera vez en un canal de Redis, se traza perfectamente, pero cuando escribo en el segundo estado, no pasa nada. Como soy nuevo en D3.js, no puedo resolver el problema. Cualquier ayuda será apreciada. Gracias.

d3.json("india-states.json", function (json) { india.selectAll("path") .data(json.features) .enter().append("path") .attr("d", path); var socket = io(); socket.on('tags', function(data){ console.log(data.message1); india.selectAll("text") .data(json.features) .enter() .append("text") .attr("fill", "black") .attr("transform", function(d) { console.log(data.message1 + "Second Time"); var centroid = path.centroid(d); return "translate(" + centroid[0] + "," + centroid[1] + ")" }) .attr("text-anchor", "middle") .attr("dy", ".35em") .style('fill', 'white') .text(function(d) { console.log("2"); if (d.id == data.message1) { console.log("1"); return data.message1; } }); }); }); 

Intenté explorar mi código y descubrí que está buscando correctamente el nombre del estado cada vez. Pero solo en el primer bash el nombre del estado sigue adelante

 console.log(data.message1); 

En todos los demás casos, solo obtengo una salida de consola y esa es la “console.log (data.message1)”;

Cree una variable para los textos y muévala fuera del socket :

 d3.json("india-states.json", function (json) { india.selectAll("path") .data(json.features) .enter().append("path") .attr("d", path); var stateText = india.selectAll(".text") .data(json.features) .enter() .append("text");//variable outside socket var socket = io(); socket.on('tags', function(data){ stateText.attr("fill", "black") .attr("transform", function(d) { console.log(data.message1 + "Second Time"); var centroid = path.centroid(d); return "translate(" + centroid[0] + "," + centroid[1] + ")" }) .attr("text-anchor", "middle") .attr("dy", ".35em") .style('fill', 'white') .text(function(d) { if (d.id == data.message1) { return data.message1; } }); }); }); 

Si desea realizar un seguimiento de su message1 anterior, puede crear una matriz fuera de la función y recorrerla:

 d3.json("india-states.json", function (json) { india.selectAll("path") .data(json.features) .enter().append("path") .attr("d", path); var stateText = india.selectAll(".text") .data(json.features) .enter() .append("text"); var arrayStates = [];//this array will hold all the names var socket = io(); socket.on('tags', function(data){ arrayStates.push(data.message1);//for each input, a new string stateText.attr("fill", "black") .attr("transform", function(d) { var centroid = path.centroid(d); return "translate(" + centroid[0] + "," + centroid[1] + ")" }) .attr("text-anchor", "middle") .attr("dy", ".35em") .style('fill', 'white') .text(function(d) { for(var i = 0; i < arrayStates.length; i++){ if (d.id == arrayStates[i]) { return arrayStates[i]; } } }); }); });