在 d3.js 生成的地图中手动选择要素(在本例中用于缩放)

Question

我想实现一个放大区域的地图，类似于迈克的点击缩放示例 http://bl.ocks.org/mbostock/2206590

事实上，我已经工作正常了。我的问题是我不能依靠点击事件来实现缩放——缩放将由另一个事件（链接）触发。因此，当我到达Mike代码的这一部分时：

function clicked(d) {
var x, y, k;
if (d && centered !== d) {
var centroid = path.centroid(d);
...

我有点茫然，因为我没有"d"。所以，我假设我可以在调用它时手动将"d"传递给我的单击函数。但是，如何从地图中实际选择我想要的要素（即"d"所代表的要素）呢？

更具体地说，我有一张世界地图。SVG 组中的路径包含类信息（例如，法国的路径如下所示）：

<path class="subunit FXX FRA" id="FXX" data-subunit="FXX" data-countryName="France" data-countryCode="FRA" d="M153.88838704622088,519........"></path>

如何将"法国对象"传递给 clicked（d） 函数？或者我应该尝试另一种方法。

任何提示或帮助非常感谢。

Answer 1

您可以使用 D3 的选择来实现此目的：

d3.select(".FRA").each(function(d) {
  // same code as inside clicked
});

Answer 2

获取与 France 对象关联的数据：

d3.select('.FXX.FRA').datum()

并将其传递给单击：

clicked(d3.select('.FXX.FRA').datum())