如何嵌套 GeoJSON / TopoJSON 几何图形或使用 D3 嵌套生成的路径？答案

【问题标题】：How can I nest GeoJSON / TopoJSON geometries OR nest the generated paths with D3?如何嵌套 GeoJSON / TopoJSON 几何图形或使用 D3 嵌套生成的路径？
【发布时间】：2015-08-30 04:36:38
【问题描述】：

问题：

我正在尝试创建美国的交互式地图，其中显示州、县和国界。县根据数据进行着色，将鼠标悬停在一个州上应该突出显示该州的所有县，并且该州应该是可点击的。我想通过在州形状内、美国形状内使用县形状的 SVG 来实现这一点。

我可以基于 CENSUS 县形状文件生成县地图，并且可以通过使用 TopoJSON 命令行准备文件并在 D3 中使用以下代码，根据外部 CSV 中的数据对州进行着色：

<!DOCTYPE html>
<meta charset="utf-8">
<style>

path {
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960,
    height = 600;

var path = d3.geo.path()
    .projection(d3.geo.albersUsa());

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("counties_pa.json", function(error, us) {
  if (error) return console.error(error);

var color = d3.scale.threshold()
    .domain([1, 10, 50, 100, 500, 1000, 2000, 5000])
    .range(["#fff7ec", "#fee8c8", "#fdd49e", "#fdbb84", "#fc8d59", "#ef6548", "#d7301f", "#b30000", "#7f0000"]);



svg.append('g').attr('class','counties').selectAll("path").data(topojson.feature(us, us.objects.cb_2014_us_county_20m).features).enter().append('path').attr('d',path).attr('style',function(d){return 'fill:'+color(d.properties.population / d.properties.area * 2.58999e6);});

});



</script>

这在视觉上大多是可以接受的（除了它没有离散的州/国界） - 但在功能上是不够的。为了在州悬停时将 CSS 应用到县，县需要在州形状内，或者以某种方式分组。

我尝试过的：

在命令行中使用 topojson-merge 将县合并为州形状，然后分别渲染州形状 - 这有助于拥有离散的州边界 - 但我还没有找到将县嵌套到相应的县的方法状态形状。

我现在在做什么：

以某种方式将州 TopoJSON 文件和县 TopoJSON 文件组合起来，并将县嵌套在州中，然后使用 D3 进行渲染。
不知何故，使用 d3 获取非嵌套的州和县数据，并将其嵌套在客户端级别的客户端上。

最后我想了解最有效和最快的渲染过程来实现我想要的功能。

提前感谢您的帮助。

【问题讨论】：

我可能在这里遗漏了一些东西，但您能否简单地获取县数据，并为初始视图将某个州（及其边界）的所有县（及其边界）涂成相同的颜色？
您可以使用 topojson 文件中的属性将县映射到它们所属的州。 IE。在每个县都有一个state 属性，标识了他们所属的州，这将允许您在悬停一个州时选择所有匹配的县。除了突出显示州悬停的县之外，我不太清楚您要实现的目标。如果是这样，那么我的建议应该是可行的。你从哪里采购你的县 shapefile，它是否在你可以重复使用的现有财产中拥有每个县所属的州？

标签： javascript svg d3.js geojson topojson

【解决方案1】：

我对您的数据源进行了抨击，这就是您想要实现的目标：http://bl.ocks.org/benlyall/55bc9474e6d531a1c1fe

基本上，我已经使用以下命令行生成了一个 TopoJSON 文件：

topojson -o counties_pa.json --id-property=+GEOID -p -e POP01.txt --id-property=+STCOU -p population=+POP010210D,area=ALAND,state=+STATEFP,county=+COUNTYFP cb_2014_us_county_20m.shp cb_2014_us_state_20m.shp

对此的一些解释：

-o counties_pa.json 设置输出文件的名称
--id-property=+GEOID 将使用输入文件中的该属性作为每个输出几何的id
-p 表示包含输入文件中的所有属性
-e POP01.txt 将从文件POP01.txt 中提取外部数据。此文件是从 POP01.xls 电子表格生成的 csv 文件，可从 http://www.census.gov/support/USACdataDownloads.html#POP 获得
--id-property=+STCOU 表示来自外部文件 (POP01.txt) 的 id 属性在 STCOU 列中。这用于匹配输入文件中匹配的ids（如上所述，在GEOID 属性中）
-p population=+POP010210D,area=ALAND,state=+STATEFP,county=+COUNTYFP 在输出文件中明确列出了我想要的属性，因此不会包含任何额外的内容。 POP010210D 是 2010 年人口普查时的人口列名，所以我只是将其用于演示目的。
cb_2014_us_county_20m.shp cb_2014_us_state_20m.shp 是两个输入文件。一种用于县形状，一种用于州形状。它们将分别添加到以文件名命名的单独属性中的输出文件中。

我是这样做的，因为您似乎是根据人口密度为您的县区着色，因此人口和面积都需要在输出文件中。人口是从POP01 电子表格中提取的，并根据GEOID（只是与县编号连接的州编号）链接到每个县。

我只是在寻找一种快速简便的方法来重新创建您的数据集，然后向其中添加状态边界，以便我可以发布答案。不确定这与您的原始数据有多接近，但它似乎可以用于演示目的。

由此，我将您的代码更新为：

<!DOCTYPE html>
<meta charset="utf-8">
<style>

path {
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}

path.state {
    fill: none;
    stroke: black;
    stroke-width: .5px;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960,
    height = 600;

var path = d3.geo.path()
    .projection(d3.geo.albersUsa());

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("counties_pa.json", function(error, us) {
  if (error) return console.error(error);

var color = d3.scale.threshold()
    .domain([1, 10, 50, 100, 500, 1000, 2000, 5000])
    .range(["#fff7ec", "#fee8c8", "#fdd49e", "#fdbb84", "#fc8d59", "#ef6548", "#d7301f", "#b30000", "#7f0000"]);

    svg.append('g')
        .attr('class','counties')
        .selectAll("path")
      .data(topojson.feature(us, us.objects.cb_2014_us_county_20m).features).enter()
        .append('path')
        .attr('d', path)
        .attr("id", function(d) { return "county-" + d.id; })
        .attr("data-state", function(d) { return d.properties.state; })
        .attr('style',function(d) { 
            return 'fill:'+color(d.properties.population / d.properties.area * 2.58999e6);
        })
        .on("mouseover", hoverCounty)
        .on("mouseout", outCounty);

    svg.append('g')
        .attr('class', 'states')
        .selectAll("path")
      .data(topojson.feature(us, us.objects.cb_2014_us_state_20m).features).enter()
        .append("path")
        .attr("class", "state")
        .attr("id", function(d) { return "state-" + d.id; })
        .attr("d", path);
    });

function hoverCounty(county) {
    d3.selectAll("path[data-state='" + county.properties.state + "']").style("opacity", .5);
}

function outCounty(county) {
    d3.select(".counties").selectAll("path").style("opacity", null);
}

</script>

新的有趣的代码是：

为每个县添加data-state 属性以确定它属于哪个州：

.attr("data-state", function(d) { return d.properties.state; })

添加状态边界（我在topojson命令行中将状态组合到TopoJSON文件中）

svg.append('g')
    .attr('class', 'states')
    .selectAll("path")
  .data(topojson.feature(us, us.objects.cb_2014_us_state_20m).features).enter()
    .append("path")
    .attr("class", "state")
    .attr("id", function(d) { return "state-" + d.id; })
    .attr("d", path);
});

添加了悬停处理程序，以便您可以看到我如何确定将县分组为州：

function hoverCounty(county) {
    d3.selectAll("path[data-state='" + county.properties.state + "']").style("opacity", .5);
}

function outCounty(county) {
    d3.select(".counties").selectAll("path").style("opacity", null);
}

将这些悬停处理程序绑定到每个县，以便它们在适当的时间执行：
```
.on("mouseover", hoverCounty)
.on("mouseout", outCounty);
```

【讨论】：

本，这就是我要找的东西，非常感谢。我不知道您可以在 topojson 命令行中使用两个 shapefile。这种方法也有效，但我想知道它是否可以通过以某种方式将县嵌套在各州中来减少冗长，而不必设置每个县 ID（带有州）以在悬停事件中使用。我有一个很好的出发点，非常感谢您的帮助。
你能检查一下你提供的topojson命令行吗？我有点被甩了，因为我看到两个文件中都不存在的-id-property 值（+STCOU），我想知道它是否是一个类型。此外，我从未使用过两个文件，可以使用更具描述性的见解。
我在回答中添加了解释，如果需要，请随时提出任何其他问题。
在以不同的方式使用嵌套或其他方式做事方面。我怀疑你会发现这种权衡可能不值得。处理数据以创建模拟物理层次结构的新数据结构可能不会那么清楚，您需要创建一个仍然与将内容传递给 topojson 以创建边界兼容的 javascript 结构。跨度>
再次感谢您的帮助。我主要关注双 --id-property 选项 - 我只学会在链接外部文件时使用逗号分隔值。我不完全理解的最后一件事是两个 -p 选项-您指定要保留所有列，然后要明确保留某些列-这是必要的还是我的解释不正确？另外，我只是假设包含的选项没有真正的顺序，并且所有选项基本上都应用于两个形状文件。