如何将滤镜和网格应用于D3等值线 [英] How to apply a filter and mesh to a D3 Choropleth

问题描述

我正在使用各种 Bostock的分位数等值线。

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

I've have successfully scaled the projection and integrated my own data. I am also currently filtering the json counties data to only include county ids starting with the state id of 48.

这一切都很完美，但是，我还是需要申请.mesh功能，用于组合边界县之间的弧线。否则，当我添加悬停效果时，我会得到奇怪的不均匀边框。

It all works perfectly, however, I still need to apply the .mesh function to combine the arcs between bordering counties. Otherwise, when I add a hover affect I get strangely uneven borders.

我尝试用数据（网格）调用替换数据调用（请参阅注释下面的行）但它没有用。

I tried replacing the data call with a datum(mesh) call instead (see the commented out line below) but it did not work.

这是我的工作代码：

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函数中进行更复杂的过滤查询，完全不需要我的

How should I be going about this? Is it possible to do a more complicated filter query inside the .mesh function and totally eliminate the need for my

var counties = topojson.feature （us，us.objects.counties），mycounties
= counties.features.filter（function（d）{if（d.id> = 48000&& d.id< = 49000）return d。 id;}）;

var counties = topojson.feature(us, us.objects.counties), mycounties = counties.features.filter(function(d) { if(d.id >= 48000 && d.id <=49000) return d.id; });

代码？

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

Or do I need to run the mesh function on that variable with a different syntax?

推荐答案

假设我明白你的最终目标是获得悬停特征的边界：

Assuming I understand your ultimate goal is to get even borders of a hovered feature:

使用datum.append（网格）不会附加区域 - 网格返回表示给定拓扑中指定对象的网格的GeoJSON MultiLineString几何对象。 API文档。此外，使用 .append（）。datum（）会附加一个功能 - 个别县的悬停效果会丢失 - 没有绑定到功能的数据，只有一个数据绑定一个功能。最后，网格也可以有奇数填充模式（请参阅此问题）。但是，没有必要使用网格来悬停显示的修改边框。

Using datum.append(mesh) won't append areas - a mesh "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 question). But, a mesh is unnecessary to get modified borders on hover that display as intended.

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

While the topojson removes identical arcs, every shared arc is represented at least twice in the geojson - but as they are identical they are overlain directly on top of each other. The layering is relative to the order in which the features are imported.

如果在悬停时扩展边界，由于要素的分层方式，它可能落后于某些（或全部或全部）相邻要素。这通过基本上剪切要素的轮廓来创建奇怪的轮廓图案。这意味着只能对县/特征进行一些更改，具体取决于要素/元素分层。

If a boundary is expanded on hover it may fall behind some (or all or none) of the neighboring features because of how the features are layered. This creates odd outline patterns by essentially clipping the feature's outline. This means that only some changes to a county/feature may be visible, depending on feature/element layering.

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

Try modifying the hover function with d3.select(this).raise() (new in v4) or use node.parentNode.appendChild(node); (v3, where node is the DOM element, not the d3 selection), these will move a feature to the top of the svg (as though they were appended last) - which will allow you to show a feature with edge styling that is not partly covered by any other feature.

请参阅此示例使用你引用的块（我已经将状态轮廓放在同一个父节点中，以便提升悬停的县也将边缘提升到状态边界之上。在鼠标移出时我降低了特征，以便状态边界不受影响。

See this example using your referenced block (I've placed the state outlines in the same parent node so that raising the hovered county raises the edge above the state boundary too. On mouse out I lower the feature so that the state boundaries are unaffected.

这篇关于如何将滤镜和网格应用于D3等值线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！