问题标签 [d3.geo]

我对 D3 很陌生，所以我可能忽略了解决问题的方法。我有一张世界地图（使用 geoJSON 和墨卡托投影），当我点击一个国家时，我希望投影集中在这个国家上（我使用的是从 d3.geo.path() 计算的边界框，所以它可以缩放并将国家翻译为中心）。见代码：

这很好用，除非所选国家被地图的边界分割，例如 这张照片中的俄罗斯

在这种情况下，它的边界框对应于整个地图的宽度，因此它不会检测到国家的“中心”，并且无法正确翻译或缩放国家。

有没有办法获得对应于一个国家的两个部分的两个边界框（我想不是），或者是否有可能获得俄罗斯的最左边和最右边的点而不依赖于旋转，然后在当前投影中获得它们的位置所以我能以整个国家为中心吗？

我在这里迷路了，所以我将非常感谢任何提示。

因此，我正在尝试制作 d3.js 卫星投影图，但发生了一些奇怪的事情。第一个问题是，当我不希望它们显示时，我的卫星投影背面的标线正在显示。

即使我在刻度上设置了填充不透明度 = 1，您仍然可以看到它们。这是它的样子。

这是它的外观截图。如您所见，另一个问题是，由于某种原因，我的刻度中的某些步骤根本没有填充：

这是 js 代码（试图使事情尽可能简单）：

（us_json 是我的 geojson 数据对象的变量名）

这是我的CSS：

另一个问题是当我尝试将一些 geojson 数据投影到我的地图上时会发生什么。当我在刻度上将填充设置为灰色时，它会覆盖地图，看起来像上面的屏幕截图。你看不到它，但陆地实际上隐藏在上面的灰色填充物后面。

但是，当我将刻度上的填充设置为无时，您可以开始看到我的 geojson 数据的轮廓，但它的显示很奇怪。这是我的geojson上没有填充的样子：

这是 geojson 数据的样子：http ://bl.ocks.org/d/fd82889eeb55d18b3c1db3d6692ed525

我基本上是在尝试填充轮廓中的所有内容，并将其显示在不显示投影背面的填充格线上。有人知道如何解决这些问题吗？

我正在尝试将 WebGL 地球与 d3.geo.satellite 投影相结合。

我已经设法将 2 个投影相互叠加并同步旋转，但我无法同步缩放。当我同步它们以匹配大小时，WebGL 投影会变形，但 d3.geo.satellite 保持不变。我尝试了不同的projection.scale、projection.distance组合，但没有取得多大成功。

这是 JS fiddle（加载资源需要一些时间）。您可以拖动它来旋转（效果很好）。但是如果你放大（使用鼠标滚轮）你可以看到问题。

https://jsfiddle.net/nxtwrld/7x7dLj4n/2/

重要的代码在脚本的底部——缩放函数。

我一直热衷于为纳米比亚开发等值线图。但发现了两个有趣的工具。传单和 D3，虽然传单有明确的说明来实现我所做的它在功能上并不符合我想要做的。这就是 D3Geo 的用武之地。我已经设置了所有东西，但下面的这个函数可以设置我的投影。

只是没有功能可以简单地添加坐标，就像它在下面的传单功能中完成的那样。对于我们这些不那么地心的人来说。

如果没有，有人可以指导我如何使用 d3.geo.conicConformal() 转换坐标 (-22.26,16.52 ) 以显示纳米比亚。

我在做什么：

我有办法将图像上传到画布上。然后，我使用 d3 的地图投影来允许选择不同的地图投影来将图像转换为。

问题：

仅当原始图像是 equirectangular 投影时，转换才有效。例如，如果我上传一个 equirectangular 地球地图，然后告诉它将其转换为 Robinson 投影，它就可以正常工作。如果我上传 Robinson 地图图像，然后尝试转换为 equirectangular 投影，它所做的只是用颜色填充透明数据（即它不起作用）。

我正在使用的代码：

有关工作示例，请参阅此 jsfiddle 。请注意，它并没有实际转换地图，而是用白色填充先前透明的区域。转换后的图像应如下所示。

我尝试按照此示例使用地图的光栅重投影。如果我通过方位角等距投影更改示例kavrayskiy7投影，

它应该将地球投影到光盘上（投影图的图像）。但是，光栅重投影超出了该圆盘并用扩展图片填充了整个画布（反投影函数不是单射的，地图上的几个 x/y 点对应于单个 lon/lat 坐标）。在原始示例中，应避免使用该行

但是对于这个例子不起作用。例如，由于相同的效果，我在使用 Mollweide 投影（两极出现两条线）时发现了其他故障。

为了解决这个问题，一种方法是修复逆投影，以便在 x/y 输入超出范围时返回错误或 None。我的尝试是使用整个球体的正向投影来检查一个点是否在范围内，以获得具有地图边界的 SVG 路径，如下代码所示：

（例如参见此示例）。但是，我发现没有简单的方法来检查一个点[x,y]是否在 SVG 封闭路径内。

所以我的问题是：

• 逆投影是否存在错误，或者我没有正确使用它们？
• [x,y]假设这是最好的方法，我怎么能找到一个点是否在 svg 路径内？
• path好奇，d3函数获取地图边界轮廓的算法代码在哪里？我在 github repo 上找不到它。

谢谢。

编辑：我浏览了这个例子中的所有 44 个投影，我发现以下 25 个故障：

Albers、Bromley、Collignon、Eckert II、Eckert IV、Eckert VI、Hammer、Hill、Goode Homolosine、Lambert 圆柱等积、Larrivée、Laskowski、McBryde–Thomas Flat-Polar Parabolic、McBryde–Thomas Flat-Polar Quartic、McBryde– Thomas Flat-Polar Sinusoidal, Mollweide, Natural Earth, Nell-Hammer, Polyconic, Sinu-Mollweide, van der Grinten, van der Grinten IV, Wagner IV, Wagner VII, Winkel Tripel。

我正在尝试使用 D3 显示旧金山的 GeoJSON 地图。我使用“http-server -c-1”提供以下文件：

索引.html：

d3Map.js：

当我检查结果页面时，我有：

但是，显示的 SVG 是空白的。

我怀疑投影没有正确缩放或居中，所以我尝试省略 .center(...)，硬编码中心和旧金山的纬度和经度，并使用 .fitSize(...)。

我对文档的术语感到有些困惑。当它说一个值应该是 GeoJSON 对象时，我不确定这是否意味着它应该是整个 JSON（我在代码中命名为“拓扑”）、特征（topology.features）或单个路径（拓扑.特征[0]）。但是，我尝试使用所有这三个，但它们都没有工作或在控制台中显示错误。

GeoJSON 文件是由其他人制作的，所以我相当肯定它是正确的。

你对我可能做错了什么或我应该寻求什么途径来调试这个有什么建议吗？

我一直在按照这个块示例将节点和路径显示为地标和道路。我已成功加载地图，并且能够放大到“街景”级别。我还按照示例成功添加了节点。

然而，我的问题是我的路径大多是直的 PointA 到 PointB 路径。M(sourcex),(sourcey)L(targetx),(targety)在添加地图之前，我一直在实施它们。0.9 / zoom.scale()现在，除非宽度设置为完全不适合我，否则路径不会显示。我需要根据数据改变宽度的路径，但即使将 0.9 稍微更改为 1，路径也会再次消失。我不确定这是否是因为地图的缩放，但无论我处于什么缩放级别，路径都不再出现。

我尝试在示例中手动编辑路径只是为了比较。从M(sourcex),(sourcey)L(target1x),(target1y)L(target2x),(target2y)...到刚刚M(sourcex),(sourcey)L(target1x),(target1y)，路径也消失了。（编辑：在mbostock 的示例上也进行了尝试，结果相同。）

我找到了一种解决方法，在路径中复制目标M(sourcex),(sourcey)L(targetx),(targety)L(targetx),(targety)。我可以更改这些路径的笔画宽度，但是，当我添加箭头标记时，箭头会倾斜。

这是一个 jsfiddle 来演示我的问题：https ://jsfiddle.net/mxzepdap/33

jsfiddle上有2条路径：

路径 1：正常M(sourcex),(sourcey)L(targetx),(targety)

• 除非笔画宽度正好为 0.9 / zoom.scale() 否则不显示
• 有指向正确方向的箭头

路径 2：重复M(sourcex),(sourcey)L(targetx),(targety)L(targetx),(targety)

• 显示设置的任何宽度的路径
• 箭头倾斜可能是由于路径上的重复点。箭头对我正在做的事情至关重要，所以这仍然是一个很大的问题。:(

您可以使用渲染上方的 2 个按钮切换路径宽度。

我看到的大多数示例都不是点对点路径，也没有放大到街景级别，所以我真的迷失了。任何帮助是极大的赞赏。

我一直在关注可缩放地图图块的 D3 实现和此示例，以创建某个城市路径的街景地图。我已经加载了地图，但我一直遇到添加 svg 路径的问题，例如：

• 大多数路径在一些计算的笔画宽度中消失（在此处单独发布）
• 放大时不再触发 mouseover 和 mouseout 事件（也可能是由于笔划宽度）

如果路径很短，即街道到街道的路径，通常会发生这种情况。但是当我创建一条从一个国家到另一个国家的路径时，它就起作用了。然而，这不是我需要的。

仔细阅读，我认为问题在于放大到街景级别会为动态调整 svg 元素（例如 4.47035e-08 笔划宽度）设置太大的比例，因为视图从世界视图级别开始。有没有办法将初始视图限制在国家/城市级别，以便规模不会那么大？

还是有另一种方法可以实现这一目标？视口？视框？任何帮助是极大的赞赏！

我需要为每个位置节点添加标签，以便为鼠标悬停和单击事件设置样式。

示例图片在这里

检查此代码笔示例以获取我到目前为止编写的代码。

我尝试<foreignObject>了几种方法，但无法获得输出。