Question

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

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

例如，采取Mike Bostock的完整美国县地图。 US Counties Map 是否可以从中展示纽约？

我还没有看到任何显示这种功能的例子。

Answer 1

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

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

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

Answer 2

我最终在project to bounding box工作，并在我想要显示的状态周围创建了一个剪切路径。

NY State W/ Counties - Clipped

Answer 3

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

这是如何从USA地图文件中提取一个状态的示例：

<!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>

*我从{{3}}下载了数据集“这些文件包含在这个文件中”。

仅显示来自完整美国郡地图的县的单个州

3 个答案: