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

Question

我正在使用D3来渲染一个基于GeoJSON数据集的矢量地图。

我有一条现有的路径，需要使用tween变换该路径。为此，我需要使用D3查找此路径的当前projection对象。但是，我似乎无法找到实现此目的的语法。是否可以查找现有D3路径的投影？

我可以通过以下方式查找路径：

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

但是，我不确定如何从这个路径中获取投影对象。感谢您能提供的任何帮助或方向。

- bryan kennedy

---

你具体指的是“投影”是什么意思？你是指在d3.geo.projection中使用的值，还是指路径的数据？ - Gerardo Furtado

是的，我正在尝试通过“投影”来转换现有路径，就像这个例子：http://bl.ocks.org/mbostock/3711652。然而，我没有像这个例子中那样访问持久变量的投影，所以我正在努力找出如何通过D3查找它。 - bryan kennedy

如果你手头只有一个带有 <path d="M...."> 的 SVG 文件，而你希望确定生成该路径字符串（即属性 d 的值）时使用的投影方式，那么答案是不可能或者说非常困难。这相当于看到一张印刷地图并能够知道它使用了什么投影方式，但更难，因为人类目前（在撰写本文时 :)）比 AI 更擅长此项任务。 - meetamit

想知道为什么无法保留用于渲染它的投影，或者至少保留创建路径的d3.geo.path（因为如果有后者，可以调用projection = myGeoPath.projection()）？这是因为使用了不同的程序进行渲染吗？ - meetamit

当地图被渲染时，将原始投影存储为变量可能并不难。如果这样做很容易并且已经存在，使用select从D3中提取它会更容易一些。由于似乎不可能，我会研究在D3之外进行此操作。@meetamit，如果您想在答案中发布解释，几天后我会将其标记为正确答案。干杯。 - bryan kennedy

你可以将投影作为路径的“数据”存储起来，需要时再检索它。 - Mark

Answer 1

根据评论中的讨论，似乎使用投影来渲染地图的代码与在应用程序其他地方需要该投影的代码位于同一应用程序中，因此这实际上是应用程序架构的问题 - 而不是投影检测的问题。当然，有很多方法可以设计应用程序，使得投影“传递”给需要它的子例程，但这实际上取决于框架和你迄今为止的实现等等。

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

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

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

我相信你的情况可能有所不同，但希望它与上述内容接近，因为我需要指出，有N条路径，对应于myMapData中的N个条目，每条路径已经有一个数据与之关联（它代表的地理要素的数据）。因此，挂载投影的好地方不是在路径上（因为它们有多个，并且它们已经绑定了数据），而是在路径的父级上面——在本例中是mapG。您可以使用.datum()将投影绑定到DOM节点来实现它：

mapG.datum(projection);

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

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

- meetamit