如何用D3和Topojson突出显示边框

Question

我使用D3加载了地图，它的扩展名为Topojson。为此，我使用了一个SHP文件，我使用ogr2​​ogr转换为GeoJSON，然后使用ogr2​​org再次转换为TopoJSON。我使用的方法在D3创建者的Let's Make a Map页面中进行了描述。

我显示一个带有细分（French department）的国家/地区。当光标悬停在某个部门上时，我希望该部门的边框为红色。

所以我像这样添加我的部门：

svg.selectAll("path")
   .data(subunits.features)
   .enter()
     .append("path")
     .attr("d", path)
     .attr("class", "departement");

而且，在CSS中，

path.departement { 
  stroke: #FFF;
}

path.departement:hover { 
  pointer-events:all; /* Necessary to catch hover */
  stroke: #F00;
}

我的问题是，这样做时，只有部分边框是红色的。看起来topojson格式只是实现了重新创建几何体的最小路径。因此，当您将一个被其他地方包围的地方悬停时，只有一些边界是路径的一部分，并且会变成红色。

我看到的唯一解决方案是使用topojson.mesh，如上文所述。但这看起来有点过分。我将不得不重绘所有网格，然后将每个部门的ID添加为类。然后我必须为每个部门创建一个CSS规则......必须有一个更好的方法。