使用 Node js 和 D3 实时在地图上绘制状态名称 [英] Plotting Name of States on Map using Node js and D3 in real time
问题描述
我一直在尝试使用 Redis Pub/Sub 系统、Node js 和 D3 在地图上绘制州的名称.问题是当我第一次在 Redis 频道上输入一个状态时,它被完美地绘制,但是当我输入第二个状态时,什么也没有发生.由于我是 D3.js 的新手,因此无法弄清楚问题所在.任何帮助将不胜感激.谢谢.
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);
在所有其他情况下,我只得到一个控制台输出,那就是console.log(data.message1);"
In all other cases I get only one console output and that is the "console.log(data.message1);"
推荐答案
为文本创建一个变量并将其移到socket
之外:
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;
}
});
});
});
如果你想跟踪你之前的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];
}
}
});
});
});
这篇关于使用 Node js 和 D3 实时在地图上绘制状态名称的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!