[REDIS] 실시간으로 노드 JS와 D3를 사용하여지도에 미국의 플로팅 이름

실시간으로 노드 JS와 D3를 사용하여지도에 미국의 플로팅 이름

나는 레디 스 팝 / 서브 시스템, 노드 JS와 D3를 사용하여지도에서 국가의 이름을 플롯 위해 노력 해왔다. 문제는 내가 레디 스 채널에 처음 상태로 입력 할 때, 그것은 완벽하게 그려되고 있다는 것입니다,하지만 난 제 2 상태에서 입력 할 때 아무 일도 발생하지 않습니다. 내가 D3.js에 새로운 오전 있기 때문에, 문제를 알아낼 수 없습니다입니다. 어떤 도움을 이해할 수있을 것이다. 감사.

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

난 내 코드를 탐험 시도하고 올바르게 상태 이름마다 가져 오는 것을 발견했다. 하지만 첫 번째 시도에서 국가 이름은 후 앞으로 간다

console.log(data.message1);

다른 모든 경우에서 나는 하나 개의 콘솔 출력을 얻을하고는있다 "CONSOLE.LOG (data.message1);"

해결법

1. ==============================

   1.본문에 대한 변수를 만들고 소켓 외부로 이동 :

   본문에 대한 변수를 만들고 소켓 외부로 이동 :

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

   당신이 당신의 이전 message1을 추적하려는 경우, 당신은 그것을 통해 함수 외부 배열과 루프를 만들 수 있습니다 :

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

from https://stackoverflow.com/questions/37125138/plotting-name-of-states-on-map-using-node-js-and-d3-in-real-time by cc-by-sa and MIT license