d3 - 如何确定元素何时离开屏幕？

我正在制作一个美国地图，上面有4000个数据点，如果可能的话我想在d3中做。我注意到，立即渲染这些许多要点会让Chrome稍微降低一些，并使Firefox停止。我想是一个重绘（）函数执行以下操作：d3 - 如何确定元素何时离开屏幕？

topRightCorner = [x1,y1] 
bottomLeftCorner = [x2,y2] 
data = data.filter(function(d) { 
    projectedCoordinates = proj(lat,lon) 
    return(projectedCoordinates[0] < x1 
     && projectedCoordintes[0] > x2 
     && projectedCoordinates[1] < y1 
     && projectedCoordinates[1] > y2}

即只保留该投影（albersUsa在我的情况）后，落在一个可视区域内的点。但我似乎无法找到预计的可见尺寸。此功能是否可用？

来源

2012-08-07 Patrick McCarthy

一种方法：

首先需要定义地图的中心（centerLatLng）的纬度/经度。假设它是lat = 40.0和lng = 97.0，这大致在连续的美国的中间。

您还想知道可见区域的尺寸（以像素为单位），比如600x400。

var projectedCenter = proj(40, 97); 
x1 = projectedCenter[0] - 300;// 300px is half the width of the visible area 
x2 = projectedCenter[0] + 300; 
y1 = projectedCenter[1] - 200;// 200px is half the height of the visible area 
y2 = projectedCenter[1] + 200;

注意，在这个例子中，与您的代码段，[x1, y1]是topLeftCorner和[x2, y2]是bottomRightCorner：

那么你的边界可以计算如下。而且，过滤标准应该更像：

return 
    projectedCoordinates[0] >= x1 && 
    projectedCoordintes[0] < x2 && 
    projectedCoordinates[1] >= y1 && 
    projectedCoordinates[1] < y2;

来源

2012-08-08 20:36:16 meetamit

自从我贴出来之后，我想出了一些有用的东西，并采取了不同的方法。

我正在做AlbersUsa（）投影中的所有东西，这对布局非常有用，因为我需要阿拉斯加和夏威夷，但由于它没有invert（）函数，所以编码不太好。我使用了正常的Albers（）。invert（），并且总是在AK和HI上绘制点，因为反正它们相对较少。

首先，我定义的角落：

projAlbers.scale(defaultScale * d3.event.scale); 
    topLeft = projAlbers.invert([0,0]); 
    bottomRight = projAlbers.invert([purewidth,pureheight]);

然后，而不是项目中的所有坐标上的每个重绘，我比较了盒与真/纬度倒坐标：

allCircles.remove(); 
     visibleDots = data.filter(function(d) { 
      return (
       (d.latitude >=49) || 
       (d.longitude < -130) || 
       (d.latitude < topLeft[1] && d.latitude > bottomRight[1] && 
       d.longitude > topLeft[0] && d.longitude < bottomRight[0])); 
     });

这是有效的 - 唯一的一点是，当你到达新英格兰或太平洋西北地区的地图曲线时，它不会绘制所有点，因为圆锥投影与我的虚拟矩形1：1不对应。仍然找出一个。

（> = 49和< -130总是自然地画夏威夷和阿拉斯加）

来源

2012-08-09 16:27:24

d3 - 如何确定元素何时离开屏幕？

回答

相关问题