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

Question

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

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

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

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

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

Answer 1

因为（根据评论中的讨论）使用投影渲染地图的代码与应用其他地方需要投影的代码在同一个应用中，所以这确实是一个应用程序架构的问题——而不是投影检测。当然有一些方法可以构建它，使得投影 "handed down" 到需要它的子例程，但这实际上取决于到目前为止的框架和你的实现等等。

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

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

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);

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

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

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

How can I find the projection of an existing D3 path

javascript

maps

d3.js