Vishal Vishal - 6 months ago 35
Javascript Question

Plotting Name of States on Map using Node js and D3 in real time

I have been trying to plot the names of the states on the map using Redis Pub/Sub system, Node js and D3.
Issue is that when I type in a state for first time on a Redis channel, it is plotted perfectly, but when I type in the second state, nothing happens. Since I am new to D3.js, am not able to figure out the problem.
Any help will be appreciated. Thanks.

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;
}
});
});
});


I tried exploring my code and found that it is correctly fetching the state name every time. But only in first attempt the state name goes forward after

console.log(data.message1);


In all other cases I get only one console output and that is the "console.log(data.message1);"

Answer

Create a variable for the texts and move it outside 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;
          }
      });
  });
});

If you want to keep track of your previous message1, you can create an array outside the function, and loop through it:

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];
          }
        }
     });
  });
});