D3.js 在D3js中绘制正交地图上的选择性数据点

所以我用D3JSV4制作了一个可拖动的正交贴图。我需要在地图上画出大量的点。但绘制所有这些图会减缓拖拉。我在想，我是否可以只获取可见坐标的点，并在拖动时再次获取这些点

所以基本上，我想得到在视口中可见的最大和最小lat-lon对，根据这些对获取和绘制数据点。一旦我拖动地球仪，我再次得到这些新的对，并在地图上获取和绘制新的点

我尝试使用getBBox并使用projection.invert将x&y值转换为lat-lon对，然后根据这些点获取数据点，但给出的x&y值似乎不正确（我的svg元素有一个动态的高度和宽度，但getBBox给出的高度和宽度为600px，我假设getBBox会给我svg的x&y值。我理解错了吗？）

下面是到目前为止的代码

    var height=window.innerHeight*.8, width=(window.innerWidth<768)?500:window.innerWidth*0.7, sens = 0.25, scaleValue=window.innerWidth<768?150:300;
    var dataList={};

    var projection = d3.geoOrthographic()
                .scale(scaleValue)
                .translate([width/2,height/2]);
    var graticule = d3.geoGraticule();
    var svgPath = d3.geoPath().projection(projection).pointRadius( function(d,i) {
        return 1;
    });

    /*drag globe to view more*/
    var dragged = d3.drag()
        .subject(function() { 
            var pointOfDrag = projection.rotate(); 
            return {x: pointOfDrag[0] / sens, y: -pointOfDrag[1] / sens}; 
        })
        .on("drag", function() {
            var rotate = projection.rotate();
            projection.rotate([d3.event.x * sens, -d3.event.y * sens, rotate[2]]);
            //console.log(projection.invert([d3.event.x * sens, -d3.event.y * sens]));
            svg.selectAll("path.land").attr("d", svgPath);
            svg.selectAll("path.graticule").attr("d", svgPath);


            var bbox = svg.node().getBBox();
            var x1 = bbox.x;
            var y1 = bbox.y;
            var x2 = bbox.x+bbox.width;
            var y2 = bbox.y+bbox.height;

            var lonLat1 = projection.invert([x1, y1]);
            var lonLat2 = projection.invert([x2, y2]);
            getDataPoints(lonLat1, lonLat2);
            locations.selectAll("path.geo-node").attr("d", svgPath);
        });

    var svg=d3.select("body").append("svg").attr("height",height).attr("width",width).call(dragged);
    var locations = svg.append('svg:g')
        .attr('id', 'locations');

    svg.append("path")
        .datum(graticule)
        .attr("class", "graticule")
        .attr("d", svgPath);

    var mapData={}, dataPoints={};

    $.when( $.ajax( "/world" )).done(function ( v1) {
        drawGlobe(v1);
    });

    var drawGlobe = function(map){
        svg.selectAll("path.land")
            .data(topojson.feature(map, map.objects.countries).features)
            .enter().append("path")
            .attr("class", "land")
            .attr("d", svgPath);

        svg.insert("path", ".graticule")
            .datum(topojson.feature(map, map.objects.countries).features)
            .attr("class", "land")
            .attr("d", svgPath);
        var bbox = svg.node().getBBox();
        var x1 = bbox.x;
        var y1 = bbox.y;
        var x2 = bbox.x+bbox.width;
        var y2 = bbox.y+bbox.height;
        var lonLat1 = projection.invert([x1, y1]);
        var lonLat2 = projection.invert([x2, y2]);
        getDataPoints(lonLat1, lonLat2);
    };
    var drawPoints=function(dataList){
        var circles = locations.selectAll('path')
            .data(dataList)
            .enter()
            .append('svg:path')
            .datum(function(d) {
               return {type: "Point", coordinates: [d.coord["Lon"], d.coord["Lat"]]};
            })
            .attr('class', 'geo-node')
            .attr('d', svgPath);
    }

---

var height=window.innerHeight*.8，宽度=（window.innerWidth我们谈论的是多少点？另外，设置一个工作演示来摆弄将非常有帮助。我正在从一个json文件中读取数据点。它包含大约10k个点。实际上，我已经设置了一个后端来读取文件和处理数据，这就是为什么不能提供摆弄链接。但我会尝试这样做并获得更多的数据回到这里。嘿，我用更小的数据集创建了一个。这让我想起了。除了使用画布而不是SVG，点和动画在拖动或缩放时被隐藏。代码在上公开，并提供了许多灵感。谢谢你的回复。我知道。问题是我使用的数据是基于平面的，但我不知道因为他（Cameron Beccario）使用数据弧。我已经阅读了代码，但它对我来说是压倒性的，我只理解零碎的部分。因此，我按照我理解的方式做了一些事情，即使用“svg”并在每个“g”中绘制数据点.自从您指出使用画布代替svg以来，我也尝试过使用画布，但我一直坚持使用地图旋转来显示点和旋转点：（我们谈论的是多少点？另外，设置一个工作演示来摆弄会有很大帮助。我正在从一个json文件中读取数据点。它包含大约10k点。事实上，我已经设置了一个后端来读取文件和处理数据，这就是无法提供摆弄链接的原因。但我会尝试这样做，然后回到这里。嘿，我创建了一个具有较小数据集的。这让我想起了。除了使用画布而不是SVG外，点和动画在拖动或缩放时隐藏。代码在上公开，并提供了许多灵感。感谢您的回复。我知道。问题是我使用的数据是基于平面的，但我猜他（Cameron Beccario）使用数据弧。我已经看完了代码，但代码对我来说太难了，我只懂一些零碎的东西。因此，我按照我理解的方式做了一些事情，即使用“svg”并在每个“g”中绘制数据点.自从您指出使用画布代替svg以来，我也尝试过使用画布，但我一直坚持使用地图旋转来显示点和旋转点：(