Javascript 动态投影单个县

以下是一个简单但鼓舞人心的单一状态的描述：

它由json中的数据绘制，该json仅包含以下状态：

d3.json("va-counties.json", function(error, topo) {
  if (error) throw error;

我想做的是动态规划一个县。假设有一个键盘事件或某个运行函数来执行此操作：读入解析的数据，找到county id，然后只返回该county的topojson特性。上面的代码块和我的案例之间的区别是，我的json文件将包含美国的所有县，但我一次只需要一个县。有没有办法在D3中实现这一点

作为一个简单的石蕊测试，对于县id=1000，我尝试：

  var current_county = topojson.feature(topo, topo.objects.counties).filter(function(d) { return d.id=1000;})),
      bounds = path.bounds(county);

然而，无论我如何努力，我总是不断地犯错误。或者它会停止抛出错误，但仍然不是“工作”。也许

.filter（）

不是这项工作的最佳工具？还有什么意见

---

感谢您阅读

首先，您的

过滤器

语法错误，我认为您的意思是比较，而不是赋值：

d.id === 1000

其次，

topojson.feature

返回对象中的GeoJSON，它不会像那样过滤。您最好的选择是在输入的过程中对其进行过滤：

// filter the geometries of the topojson the structure you want
var geoCounty = topo.objects.counties.geometries.filter(function(d){
  return d.id === "51750";
});

// assign it back to the topojson object
topo.objects.counties.geometries = geoCounty;

// and off you go...
var county = topojson.feature(topo, topo.objects.counties),
    bounds = path.bounds(county);

完整运行代码：

.县{
填充：#ccc；
}
可变宽度=500，
高度=300；
var projection=d3.geo.conicConformal（）
.平行线（[38+02/60,39+12/60]）
.旋转（[78+30/60,0]）
.规模（200000）
.翻译（[0,0]）；
var path=d3.geo.path（）
.投影（投影）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
d3.json（“https://jsonblob.com/api/ce96ca06-e1ce-11e6-90ab-03e5986c4e20，函数（错误，拓扑）{
如果（错误）抛出错误；
var geoCounty=topo.objects.countries.geometrics.filter（函数（d）{
返回d.id==“51750”；
});
topo.objects.countries.geometrics=地理县；
var country=topojson.feature（topo，topo.objects.countries），
边界=路径边界（县）；
投影
.translate（[width/2-（bounds[0][0]+bounds[1][0]）/2，height/2-（bounds[0][1]+bounds[1][1]）/2]）；
追加（“路径”）
.数据（县）
.attr（“类”、“县”）
.attr（“d”，路径）；
});

首先，您的

过滤器

语法错误，我认为您的意思是比较，而不是赋值：

d.id === 1000

其次，

topojson.feature

返回对象中的GeoJSON，它不会像那样过滤。您最好的选择是在输入的过程中对其进行过滤：

// filter the geometries of the topojson the structure you want
var geoCounty = topo.objects.counties.geometries.filter(function(d){
  return d.id === "51750";
});

// assign it back to the topojson object
topo.objects.counties.geometries = geoCounty;

// and off you go...
var county = topojson.feature(topo, topo.objects.counties),
    bounds = path.bounds(county);

完整运行代码：

.县{
填充：#ccc；
}
可变宽度=500，
高度=300；
var projection=d3.geo.conicConformal（）
.平行线（[38+02/60,39+12/60]）
.旋转（[78+30/60,0]）
.规模（200000）
.翻译（[0,0]）；
var path=d3.geo.path（）
.投影（投影）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
d3.json（“https://jsonblob.com/api/ce96ca06-e1ce-11e6-90ab-03e5986c4e20，函数（错误，拓扑）{
如果（错误）抛出错误；
var geoCounty=topo.objects.countries.geometrics.filter（函数（d）{
返回d.id==“51750”；
});
topo.objects.countries.geometrics=地理县；
var country=topojson.feature（topo，topo.objects.countries），
边界=路径边界（县）；
投影
.translate（[width/2-（bounds[0][0]+bounds[1][0]）/2，height/2-（bounds[0][1]+bounds[1][1]）/2]）；
追加（“路径”）
.数据（县）
.attr（“类”、“县”）
.attr（“d”，路径）；
});

现在这很有道理。谢谢你给我展示了正确的会议。你是对的，我应该用比较法。我正在尝试测试您的示例，但在指出库时遇到了问题。我一直从d3.projection.js文件中获取“错误：无效或意外令牌”。我知道D3.js是utf-8，那一个有什么不同吗？我该怎么办？？？@ArashHowaida，那个错误消息应该会指向一行代码。当你检查它时，有什么东西看起来不对劲吗？错误真的是来自

d3.projection.js

还是您的代码？如果不复制它，我几乎不可能为您调试它。它说的是

d3js.org/d3.geo.projection.v0.min.js

第1行，而不是从主html。让我运行一些测试，看看它是什么编码。我真的很困惑。如果我们省略了d3.geo.projection.v0.min.js，您的方法有效吗？赞成标准投影方式吗？我猜角度会有所不同，但不会那么明显。我试着只更改projection函数，但似乎除了projection变量之外还有其他一些对geo.projection脚本的调用。在我弄清楚我对库的引用有什么问题之前，我们可以用它作为解决方案。@ArashHowaida，当然。使用标准的

d3.geo.albersUsa

运行，这现在非常有意义。谢谢你给我展示了正确的会议。你是对的，我应该用比较法。我正在尝试测试您的示例，但在指出库时遇到了问题。我一直从d3.projection.js文件中获取“错误：无效或意外令牌”。我知道D3.js是utf-8，那一个有什么不同吗？我该怎么办？？？@ArashHowaida，那个错误消息应该会指向一行代码。当你检查它时，有什么东西看起来不对劲吗？错误真的是来自

d3.projection.js

还是您的代码？如果不复制它，我几乎不可能为您调试它。它说的是

d3js.org/d3.geo.projection.v0.min.js

第1行，而不是从主html。让我运行一些测试，看看它是什么编码。我真的很困惑。如果我们省略了d3.geo.projection.v0.min.js，您的方法有效吗？赞成标准投影方式吗？我猜角度会有所不同，但不会那么明显。我试着改变投影函数，但它