Question

我已经成功扩展了投影并整合了我自己的数据。我目前还在过滤json县的数据，只包括以州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＆gt; = 48000＆amp;＆amp; d.id＆lt; = 49000）return 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（我已经在相同的父节点中放置了状态轮廓，以便提升悬停的县也将边缘提升到状态边界之上。在鼠标移出时我降低了特征所以国家边界不受影响。

如何将滤镜和网格应用于D3等值线

1 个答案: