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

时间:2016-06-29 14:03:09

标签: javascript d3.js maps

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

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

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

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

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

1 个答案:

答案 0 :(得分:2)

因为(根据评论中的讨论),听起来像使用投影渲染地图的代码与应用程序中其他地方需要投影的代码存在于同一个应用程序中,这真的是一个问题应用程序架构 - 不是投影检测。当然有一些方法可以设计它,以便投影“传播”。到需要它的子程序,但这实际上取决于框架和你的实现到目前为止等。

因此,如果没有进入架构,另一种方法是遵循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);

现在,从代码中的其他位置开始,您需要使用datum()来提取它:

var mapG = d3.select('svg g.map')
var projection = mapG.datum()
相关问题