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

Question

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

我已经成功地缩放了投影并整合了我自己的数据。我目前也在过滤 json 县数据以仅包含以州 id 48 开头的县 id。

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

我尝试用 datum(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 counties = topojson.feature(us, us.objects.counties), mycounties =counties.features.filter(function(d) { if(d.id >= 48000 && d.id

代码？

或者我是否需要使用不同的语法对该变量运行网格函数？

Answer 1

假设我了解您的最终目标是获得悬停特征的边界：

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

虽然 topojson 删除了相同的弧线，但每个共享弧线在 geojson 中至少表示了两次 - 但由于它们是相同的，它们直接重叠在彼此之上。分层与导入要素的顺序有关。

如果边界在悬停时展开，则由于要素的分层方式，它可能会落后于某些（或全部或没有）相邻要素。这实际上通过剪裁特征的轮廓来创建奇怪的轮廓图案。这意味着根据要素/元素分层，可能只会看到县/要素的一些变化。

尝试使用d3.select(this).raise() (new in v4) 修改悬停功能或使用 node.parentNode.appendChild(node);（v3，其中 node 是 DOM 元素，而不是 d3 选择），这些会将特征移动到 svg 的顶部（好像它们是最后附加的） - 这将允许您显示具有边缘样式的特征任何其他功能都未部分涵盖的内容。

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