仅显示具有完整美国县地图中县的单个州答案

【问题标题】：Display only a single state with counties from a full US counties map仅显示具有完整美国县地图中县的单个州
【发布时间】：2016-09-07 21:16:36
【问题描述】：

是否可以从完整的美国县地图中显示单个州？

我知道我可以获取每个州的形状文件和县并创建 topojson，但如果可能的话，我宁愿使用一个文件。

以 Mike Bostock 的完整美国县地图为例。 US Counties Map 是否可以仅显示 NY？

我还没有看到任何显示此类功能的示例。

【问题讨论】：

您必须创建一个遮罩来过滤掉不在该状态的地图的其余部分；如果没有每个州的形状文件，你会怎么做？
是的，你是对的。无论如何我都需要这些文件。谢谢
如果只显示NY，则不需要其他县的shape文件，相反，您需要只包含NY的shape文件。或者，如果您可以获得包含县名的 topojson，您可以根据名称过滤选择。
@ChiragKothari 谢谢。所以如果我理解正确..使用完整的美国县 json，我可以使用 NY 形状文件进行掩码，然后只显示 NY...当然还有县
@Claies 仅供参考，我最终按照您的建议创建了一个蒙版，并对其他几个示例进行了一些修改。再次感谢。 bl.ocks.org/gregdevs/a73f8a16f129757c037e72ecdebdd8f2

标签： javascript d3.js

【解决方案1】：

一旦你建立了你的 d3.json 包装器，你就可以使用 JavaScript 过滤方法，所以如果你的数据有一个“状态”字段：

d3.json(filename, function(error, data){ var single=data.filter(function(d){ return d.state==='Ohio';} }

然后使用新的单个变量作为 d3 的数据

【讨论】：

谢谢。我最终根据几个例子做了类似的事情。我返回 id 并设置剪辑路径。谢谢。 bl.ocks.org/gregdevs/a73f8a16f129757c037e72ecdebdd8f2

【解决方案2】：

我最终使用了project to bounding box，并围绕我想要显示的状态创建了一个剪切路径。

NY State W/ Counties - Clipped

【讨论】：

【解决方案3】：

我知道这是一个很晚的答案。但是，它可能对将来的其他人有所帮助。

这是如何从美国地图文件中提取一个州的示例：

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

path {
        fill: lightgray;
        stroke: #000000;
        stroke-width: 1.5;
        }


path:hover {
        fill:orange;
        cursor:pointer;
      }

#state-borders {
  fill: white;
  stroke: #000000;
  stroke-width: 10.5px;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}


</style>
<body> 
  <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
  <script src="https://d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960,
    height = 500,
    centered;

var projection =  d3.geoAlbersUsa()
    .scale(1370)
    .translate([width / 2, height / 2]);

var path = d3.geoPath()
    .projection(projection);

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


d3.json("us-counties-github.json",function(json){
  console.log(json);


    svg.selectAll("path")
       .attr("id", "state_fips")
       .data(topojson.feature(json, json.objects.collection).features.filter(function(d) { return d.properties.state_fips == 36; }))
       .enter()
       .append("path")
       .attr("d", path)
       .attr("stroke","white")
       .attr("fill", "gray");



    });
</script>

*我从https://raw.githubusercontent.com/deldersveld/topojson/master/countries/united-states/us-albers-counties.json“该文件包含县”下载数据集。

【讨论】：

如果你想拥有不同的状态，你只需要将 state_fips 数字更改为你想要的任何值。