如何找到现有 D3 路径的投影

Question

我正在使用D3根据 GeoJSON 数据集渲染矢量图。

我有一个现有的路径，我需要使用补间转换路径。为此，我需要使用 D3 来查找projection此路径的当前对象。但是，我似乎无法弄清楚实现这一点的语法。是否可以查找现有 D3 路径的投影？

我可以使用以下方法查找路径：

const mapPath = d3.select('path.states');

但是，我不确定从那里去哪里才能从这条路径获取投影对象。感谢您提供的任何帮助或指导。

Answer 1

由于（基于评论中的讨论）听起来使用投影来渲染地图的代码与应用程序中其他地方需要投影的代码位于同一个应用程序中，那么这实际上是应用程序架构的问题\ xe2\x80\x94 不是投影检测。当然有一些方法可以构建它，以便将投影“传递”给需要它的子例程，但这实际上取决于框架和到目前为止的实现等。

\n\n

因此，在不涉及架构的情况下，另一种方法是遵循 Mark 的建议（实际上由原始问题中的代码片段指示），使用 d3 的数据绑定将投影挂在 DOM 节点上投影有助于产生。在我看来，与应用程序架构解决方案相比，为此目的使用数据绑定是次要的选择，因为它可能会使您的代码更难遵循，容易出现错误。但它会起作用，并且至少在一个简单的应用程序中，这样做是合理的。所以...

\n\n

据推测，您在某个地方有创建和渲染路径的代码，它可能看起来像这样：

\n\n

var projection = d3.geo.mercator();\nvar mapG = svg.append(\'g\').attr(\'class\', \'map\');\nvar mapG.selectAll(\'path\').data(myMapData).enter()\n  .append(\'path\')\n  .attr("d", d3.geo.path().projection(projection));\n

\n\n

我确信你的看起来不同，但希望它接近上面的，因为我需要指出有 N 个路径，对应于 中的 N 个条目myMapData，并且每个路径已经有一个与之关联的数据（它所代表的地理特征的数据）。因此，悬挂投影的好地方不是在路径上（因为有多个路径，并且它们已经绑定了数据），而是在mapG本例中路径 \xe2\x80\x94 的父路径上。方法是将.datum()投影绑定到 DOM 节点：

\n\n

mapG.datum(projection);\n

\n\n

现在，从代码中需要查找投影的其他datum()位置，您可以使用它来提取它：

\n\n

var mapG = d3.select(\'svg g.map\')\nvar projection = mapG.datum()\n

\n