javascript - 如何在D3中监听频繁的SSE？-6ren

javascript - 如何在D3中监听频繁的SSE？

转载作者：行者123 更新时间：2023-12-03 08:45:21

我无法找出在 D3 中绘制点时实现平滑过渡的方法。我有一个绘制世界地图的脚本。我正在监听服务器，该服务器向我提供事件的纬度和经度。我想在屏幕上绘制事件，使圆的半径在 1 秒内从 0 增加到 10。因为我正在监听服务器，所以我可以在一秒钟内获得多个数据点。当前一个点仍在转换时，我应该如何绘制另一个点？

这是我想出的代码，但我无法找出将 d3 类型转换添加到“圆”的方法，因为只有当您使用 d3.data([coords]) 时才有可能。进入()。在我看来，在这里使用 d3 似乎有点矫枉过正，因为我可以直接更改属性。

编辑:

为了稍微简化我的问题，我决定收集 1 秒的数据，然后一次性显示这些点。但是，我认为我无法理解 exit() 的本质，因为下面的代码没有删除前面的点并在坐标处创建新点。 Points.exit().remove 不起作用，因为它返回一个大小为 0 的数组，尽管坐标每次都会改变。而且，它会在 map 上连续显示第一组数据，之后不会更改任何内容。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(
                function() {
                    sse = new EventSource('/my_event_source');
                    sse.onmessage = function(message) {
                        console.log('A message has arrived!');
                        var data = JSON.parse(message.data);
                        data.data.forEach(function(d){
                          d.lat = +d.lat;
                          d.lg = +d.lg;
                        });
                        console.log(data.data)
                        plot(data.data);
                       }
                })
    </script>

    <style>

.point{
  fill:rgb(247,148, 32);
  stroke:black;
  stroke-width:0.7;
  opacity:0.7;
}
    </style>

    <script type ="text/javascript">
      function draw(geo_data){
        "use strict";
        var margin = 75,
         width = 1920 -margin,
         height = 1080 -margin; 

      var svg = d3.select('body')
                    .append("svg")
                    .attr('class',"main")
                    .attr('width', width+margin)
                    .attr('height', height+margin)

      var svg2 = svg.append('g')
                    .attr('class','map');


      // convrt the long, lat to pixels ()x,y
      var projection = d3.geo.mercator()
                          .scale(220)
                          .translate([width/2, height/1.5]);
      //svg objects
      var path = d3.geo.path().projection(projection);
      var map = svg2.selectAll('path')
                  .data(geo_data.features)
                  .enter()
                  .append('path')
                  .attr('d', path)
                  .style('fill','rgb(9,157,217)')
                  .style('stroke','black')
                  .style('stroke-width', 0.5);

      svg.append("g").attr("class","point");
      }

      function plot(data){
        "use strict";
        var margin = 75,
         width = 1920 -margin,
         height = 1080 -margin;

         var spot = d3.select('svg.main').select("g.point");

        // convrt the long, lat to pixels ()x,y
         var projection = d3.geo.mercator()
                             .scale(220)
                             .translate([width/2, height/1.5]);



          var coords = data.map(function(d) {
            return projection([d.lg, d.lat]);
          });

          var points = spot.selectAll("circle")
                        .data(coords);

          points.exit().remove();

          points.enter()
                .append("circle")
                .classed("circle", true)
                .attr('cx', function(d){return d[0];})
                .attr('cy', function(d){return d[1];})
                .attr('r', 10);
        }
    </script>
  </head>

  <body>
    <script type = "text/javascript">
    /*Use d3 to load the GeoJSON file*/
    d3.json("/static/world_countries.json", draw);
    </script>
  </body>

</html>