如何将过滤器和网格应用于D3 Choropleth

Question

我正在使用Bostock的Quantile Choropleth的变体。

我已经成功地扩展了投影并整合了我自己的数据。我目前也在过滤json县的数据，只包括以州id 48开头的县id。

这一切都很完美，然而，我仍然需要应用.mesh函数来组合边界县之间的圆弧。否则，当我添加悬停效果时，我会得到奇怪的不均匀边界。

我试着用数据(网格)调用替换数据调用(请参见下面的注释行)，但没有成功。

这是我的工作代码：

function ready(error, us) {
if (error) throw error;
//define the feature of the states from the topojson file, then filter so only state 48 (texas) shows
var states = topojson.feature(us, us.objects.states),
state = states.features.filter(function(d) { return d.id === 48; })[0];
//define the features for the counties and filter based on number (starting with 48)
var counties = topojson.feature(us, us.objects.counties),
mycounties = counties.features.filter(function(d) { if(d.id >= 48000 && d.id <=49000) return d.id; });
//initiate the class for the state, and add an outline path
svg.append("path")
.datum(state)
.attr("class", "outline")
.attr("d", path);
//initiate the g object for the counties
svg.append("g")
.attr("class", "counties")
.selectAll("path")
//.datum(topojson.mesh(us, us.objects.counties, function(a, b) { return a !== b; }))
// ^I tried adding this to replace the following line, but it does not work
.data(mycounties)
.enter().append("path")
.attr("fill", function(d) { return color(d.establishments = centralTexas.get(d.id)); })
.attr("d", path)
.append("title")
.text(function(d) { var obj2 = jsonCounties[d.id]; if (typeof obj2 != "undefined") {return obj2.countyName + ": " + d.establishments + " Active Establishments";} });
}

我该怎么办？有没有可能在.mesh函数中进行更复杂的过滤器查询，并完全消除对的需求

var countries=topojson.feature(us，us.objects.countries)，myconsunces=countries.features.filter(函数(d)｛if(d.id>=4800&&d.id<=49000)return d.id；｝)；

代码？

或者我需要用不同的语法在该变量上运行网格函数吗？

Answer 1

假设我理解您的最终目标是获得悬停功能的平均边界：

使用datum.append(网格)不会附加区域-网格"返回表示给定拓扑中指定对象的网格的GeoJSON MultiLineString几何对象。"API文档。此外，使用.append().datum()将附加一个特征——单个县的悬停效果将丢失——没有数据绑定到特征，只有一个数据绑定到一个特征。最后，网格也可能有奇怪的填充图案(请参见此问题)。但是，网格不需要在悬停时按预期显示修改的边界。

虽然topojson删除了相同的弧，但每个共享弧在geojson中至少表示两次，但由于它们是相同的，它们直接重叠在一起。分层与导入特征的顺序有关。

如果悬停时展开边界，则由于特征的分层方式，边界可能会落在某些(或全部或全部)相邻特征之后。这通过基本上剪裁特征的轮廓来创建奇怪的轮廓图案。这意味着，根据要素/元素分层，可能只会看到对县/要素的一些更改。

尝试使用d3.select(this).raise()(v4中的新功能)修改悬停功能，或使用node.parentNode.appendChild(node);(v3，其中node是DOM元素，而不是d3选择)，它们将把一个特性移动到svg的顶部(就像它们是最后附加的一样)，这将允许您显示一个具有边缘样式的特性，该特性没有被任何其他特性部分覆盖。

使用引用的块查看此示例(我已将州轮廓放置在同一父节点中，因此提升悬停的县也会将边缘提升到州边界之上。鼠标悬停时，我会降低该功能，使州边界不受影响。