使用Node js和D3实时绘制地图上的国家名称

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

本文关键字：国家 地图 绘制 js Node D3 实时 使用      更新时间：2023-09-26

我一直在尝试使用Redis Pub/Sub系统、Node js和D3绘制地图上的状态名称。问题是，当我第一次在Redis通道上键入一种状态时，它被完美地绘制出来，但当我在第二种状态下键入时，什么都没有发生。由于我是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）；"

为文本创建一个变量并将其移动到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;
          }
      });
  });
});

如果你想跟踪你以前的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];
          }
        }
     });
  });
});
相关文章：