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

Question

我正在使用 Bostock's 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 counties = topojson.feature(us, us.objects.counties), mycounties = counties.features.filter(function(d) { if(d.id >= 48000 && d.id <=49000) return d.id; });

代码？

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

Answer 1

假设我了解您的最终目标是使悬停特征的边界均匀：

使用 datum.append（网格）不会附加区域 - 网格 "Returns the GeoJSON MultiLineString geometry object representing the mesh for the specified object in the given topology." API documentation. Also, using .append().datum() would append one feature - hover effects on individual counties would be lost - there are not data bound to features, just one datum bound to one feature. Lastly, the mesh can have odd fill patterns too (see this ）。但是，网格不需要在悬停时修改边框以按预期显示。

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

如果边界在悬停时扩展，它可能会落后于一些（或全部或 none）相邻要素，因为这些要素是如何分层的。这通过实质上剪切特征的轮廓来创建奇怪的轮廓图案。这意味着只有 county/feature 的某些更改可能可见，具体取决于 feature/element 分层。

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

使用您引用的块查看此 example（我已将州轮廓放置在同一个父节点中，因此升高悬停县也会升高州边界上方的边缘。鼠标移开时，我降低了使状态边界不受影响的特征。

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

How to apply a filter and mesh to a D3 Choropleth

javascript

geojson

d3.js