Question

我一直在尝试使用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）;”

Answer 1

为文本创建变量并将其移到<ion-view view-title="Video"> <ion-content class="padding"> <input type="file" name="file" accept="video/*;capture=camera" tg-file-select id="fileSelect"> <h3>Upload Video</h3> <video class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="240" videojs></video> <div class="row"> <button type="button" class="button button-assertive" ng-click="uploadVideo()" style="margin: auto;">Upload Video</button> </div> </ion-content> </ion-view>：

之外

(function() {
        'use strict';
        angular.module('starter')
            .directive('videojs', function($sce) {
                var linker = function(scope, element, attrs) {
                    var player;
                    attrs.type = attrs.type || "video/mp4";

                    var setup = {
                        'techOrder': ['html5', 'flash'],
                        'controls': true,
                        'preload': 'auto',
                        'autoplay': false,
                        'fluid': true
                    };

                    attrs.id = "aboutmeVideo";
                    element.attr('id', attrs.id);
                    player = videojs(attrs.id, setup, function() {
                        var source = { type: "video/mp4", src: $sce.trustAsResourceUrl("someFileURL") };

                        this.src({ type: attrs.type, src: source.src });
                    });

                    $('button.vjs-fullscreen-control').on('click', function(e) {
                        e.preventDefault();
                        console.log('FullScreen Clicked');
                        player = videojs('aboutmeVideo');
                        if (player.isFullscreen()) {
                            player.exitFullscreen();
                        } else {
                            player.requestFullscreen();
                        }
                    });
                    scope.$on('NEW_VIDEO', function(event, videoURL) {
                        videojs('aboutmeVideo').src({ type: 'video/mp4', src: videoURL });
                    });
                };
                return {
                    restrict: 'A',
                    link: linker
                };
            });
    })();

如果您想跟踪以前的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;
          }
      });
  });
});

使用节点js和D3实时绘制地图上的州名称

1 个答案: