我一直在尝试使用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:
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,可以在函数外部创建一个数组,并循环遍历它:
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]; } } }); }); });