使用 topojson 映射美国邮政编码时出错

2024-02-17

加载美国邮政编码 topojson 文件后,我在 d3.js 中收到错误。groupdata该行未定义:

  function bind(group, groupData) {
     var i, n = group.length, m = groupData.length, n0 = Math.min(n, m), updateNodes = new Array(m), enterNodes = new Array(m), exitNodes = new Array(n), node, nodeData;

错误为:

Uncaught TypeError: Cannot read property 'length' of undefined 

我调用和创建路径的代码是:

  d3.json("data/us-atlas/us-zipcodes.json", function(error, topology) {
  svg.selectAll("path")
      .data(topojson.feature(topology, topology.objects.zipcodes).features)
      .enter()
      .append("path")
      .attr("d", path)
  });

我从此存储库生成了邮政编码 topojson 文件:https://github.com/mbostock/us-atlas https://github.com/mbostock/us-atlas。当我检查负载上的拓扑对象时,我在 topology.objects.zipcodes 下看到 32893 个弧。

我已成功加载了以下县的 Chlopleth 示例http://bl.ocks.org/mbostock/4060606 http://bl.ocks.org/mbostock/4060606我正在使用类似的模式。

我正在使用 d3.js 版本 3.2.8 和 topojson.js 版本 1.2.3。

有任何想法吗?这是一个错误的邮政编码文件还是我调用它是错误的?


@Hugolpz - 抱歉,我没有,我没有回复。我没有收到你的评论的通知。

我终于弄明白了。我在这里记录下来,也许会对某人有所帮助。

我最初是从美国人口普查网站(目前因政府关闭而关闭)获取邮政编码形状文件。它的名称为 tl_2012_us_zcta510.zip,大小为 836MB。我尝试使用此处建议的参数 @mbostock 使用 topojson 对其进行转换:http://bl.ocks.org/mbostock/4965422 http://bl.ocks.org/mbostock/4965422

转换花费了超过 12 个小时,node.js 需要 6GB 内存才能将 shapefile 转换为 topojson 文件。它仍然无法在 d3.js 中工作(请参阅原始问题中的错误)。另外,调试这么大的 json 文件也很难调试。原始形状文件也不会在 QGIS 中显示。

我最终放弃并搜索不同的数据集。 Geocommons 有一个 5MB 的邮政编码 shapefile,其中包含邮政编码、州、名称、人口和面积等属性:http://geocommons.com/overlays/54893 http://geocommons.com/overlays/54893。我将其交给 topojson,它在一分钟内转换了 shapefile:

topojson \
-p name=PO_NAME \
-p zip=ZIP \
-p state=STATE \
-o zips_us_topo.json \
zip_codes_for_the_usa.shp

为了检查 json 文件以理解它,我使用了https://github.com/einars/js-beautify https://github.com/einars/js-beautify用这个命令:

js-beautify zips_us_topo.json -o zips_us_topo_pretty.json

我使用非美化版本在浏览器中加载,因为它较小。

为了绘制它,我基本上使用了与 @mbostock 的县分区统计图相同的代码。如果您需要该文件或 d3 代码或清理后的 topojson 文件,您可以在此处获取它们:

https://gist.github.com/jefffriesen/6892860 https://gist.github.com/jefffriesen/6892860

http://bl.ocks.org/jefffriesen/6892860 http://bl.ocks.org/jefffriesen/6892860

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 topojson 映射美国邮政编码时出错 的相关文章

  • nvd3 格式化日期始终返回 1970-01-01

    我正在尝试使用构建折线图nvd3 for d3js但我在 x 轴上使用日期域时遇到了一些问题 这是我的代码 data lineChart key key1 values x 2014 04 20 y 6 x 2014 04 13 y 5 x
  • 如何在“object”标签内选择 SVG?

    HTML 页面的内容如下所示 方法如下script js looks var tooltip d3 select body append div style position absolute sty
  • 未捕获的类型错误:无法读取未定义的属性“albersUsa”

    以前可能有人问过这个问题 但我希望我能得到针对我遇到的问题的答案 我是 d3 的新手 我现在正在尝试绘制一个纬度 经度 当我成功完成第一个纬度 经度时 我将完成其余的工作 感谢专家的任何帮助 谢谢 尝试在特定区域绘制蜂窝基站 这是代码
  • D3更新circle-pack数据新节点与现有节点重叠

    我正在关注一般更新模式 http bl ocks org mbostock 3808234但在分层方面存在问题 使用圆形包装布局 我pack新数据 update enter and exit圆形元素 然而 当新元素enter 它们重叠upd
  • 将json解析为条形图d3js

    我正在尝试使用 json url 创建条形图 关于印象和时间 我认为我没有正确引用 data data 中的数据 如何从 d3 中的 json 文件访问印象字段 var url https script google com macros
  • Javascript 将对象推送为克隆

    我将 d3 用于交互式网络应用程序 我需要绑定的数据在交互过程中发生变化 并且由 JSON 变量中的一些选定对象组成 为此 我在 JSON 变量上使用了映射 并进行了一些查询来选择适当的对象 对象被推送到列表中 并且该列表被绑定为新数据 我
  • 在 d3.js 中换行长文本

    我想将长文本元素换行为宽度 这里的例子取自博斯托克的wrap功能 http bl ocks org mbostock 7555321 但似乎有两个问题 首先 wrap的结果没有继承元素的x值 文本左移 其次它绕在同一条线上 并且lineHe
  • D3 强制布局,较大的节点聚集在中心

    我一直在修改将用于标签云的强制布局 每个标签都由一个
  • 如何在 d3.js 中填充 svg 圆圈内的图像

    这是我在 svg 中填充圆圈的代码 var svgContainer d3 select body append svg attr width 1000 attr height 1000 var circles svgContainer s
  • 如何从 mysql 数据库中提取数据并使用 D3.JS 进行可视化?

    我有一个数据库MySQL我想在其中可视化D3 JS 为了做到这一点 首先我想parse中的数据JSON格式 然后编写一个基本代码 从数据库中提取数据并使用D3 JS 我环顾四周 但找不到我想要的东西 因为我是新手D3 JS 我怎样才能做到这
  • 动画 D3 地球仪 (d3.geo.azimuthal)

    我对 d3 javascript 库有疑问 我想使用方位角 http mbostock github com d3 talk 20111018 azimuthal html地球 我想从地球上的经度和纬度坐标插入点 并使地球动画化 而无需使用
  • D3js:如何设计地形图?

    给定具有高程数据的 GIS 栅格 如何在D3js中设计地形图 有没有使用 D3js 制作的耕地地形图 地形图的示例 不工作 我探索了以下可能性 tif gt gdal contour py gt shp gt topojson gt d3j
  • d3.js:在 SVG 线性渐变中过渡颜色?

    正如标题所说 使用D3 js 是否可以实现线性渐变的颜色过渡 例如 如果我有这个渐变 var gradient svg append svg defs append svg linearGradient attr id gradient a
  • D3.js 从 file:/// 加载本地数据文件

    我知道D3 js支持使用XHR和JSONP加载数据文件requests https github com mbostock d3 wiki Requests 但就我而言 我将通过从文件系统双击 html 文件来运行它们 这将像file fo
  • 如果满足条件,则在另一个转换期间添加并发转换

    我试图在转换运行时添加一个新的转换 条件是如果 bar1 宽度与 bar2 匹配 则条形会更改位置 我使用了transition tween来查看是否满足条件 当第二个转换开始时 第一个转换停止 我希望第一个转换继续运行直到其持续时间结束
  • JS / d3.js:突出显示相邻链接的步骤

    再会 我之前对该项目的问题是 D3 js 根据相同的 json 值动态生成源和目标 https stackoverflow com questions 41138515 d3 js dynamically generate source a
  • 时间序列折线图与轴不同步

    本实验基于这个d3官方例子 http bost ocks org mike path 我想要实现的是可视化时间序列数据的最后 x 分钟 我有这个代码的副本jsfiddle http jsfiddle net 225dC 3 单击以添加新数据
  • SVG 文本在 IE 中消失,直到我单击它

    我在 Internet Explorer Edge 以 Win7 上的为准 中遇到与 SVG 创建和操作相关的问题 在我正在开发的应用程序中 我们使用 d3 生成 SVG 形式的图形 在 Chrome 和 Firefox 中 它们工作得很好
  • 需要帮助从数组中为国家/地区着色,保留其余默认颜色

    我需要一些帮助从我创建的数组中获取数据 然后仅对数组中存在的国家 地区进行着色 而不在数组中的其余国家 地区我希望保留为默认颜色 我正在使用 D3 来完成所有这些工作 并且我非常确定我可以通过 D3 实现我需要的目标 但不确定如何实现 我想
  • 显示具有多个父代的 D3 树

    我目前有this http bl ocks org mbostock 4339083图已实现 我希望在描述具有多个父节点的子节点时保持结构和可折叠性 有没有办法做到这一点 我研究了力图 但我也想保留一组层次结构 这意味着 1 级的父级可以有

随机推荐

  • 优雅关闭失败

    我有一个带有 server shutdown graceful 的 spring boot 2 3 应用程序 当关闭时会抛出 2020 11 30 11 07 35 485 WARN 3038 SpringContextShutdownHo
  • SQL 存储过程 - 请帮我写这个! (第2部分)

    我有下表 其中值为 501 CREATE TABLE Numbers Number numeric 20 0 NOT NULL PRIMARY KEY INSERT INTO Numbers VALUES 501 我如何在此上编写一个存储过
  • 在 Java/Swing 的全屏程序中停止使用 Tab/Alt-F4

    我需要一种方法来阻止人们在我的 Java 程序运行时使用其他程序 即阻止人们切换选项卡并按 Alt F4 使程序全屏使用 window setExtendedState Frame MAXIMIZED BOTH maximise windo
  • C# ASCII 或 Unicode

    您好 我是编程和网络开发的初学者 我有一个关于 ASCII 和 Unicode 编码的问题 在 msdn 和其他 Web 示例中执行以下操作 byte byteData Encoding ASCII GetBytes data 这是因为这些
  • 如何将 Google Cloud AI Platform Jupyter Lab 升级到 Python 3.7+

    Google Cloud Platform的AI Platform可以方便地部署Jupyter Lab 但仅适用于Python 2和Python 3 5 3 如何升级我的实例才能运行 Python 3 7 或更高版本 笔记本 该解决方案是基
  • 在 Visual Studio 2012 的新 C++ 项目中自动创建的 stdafx.cpp 文件是什么

    据我了解 stdafx h 是一个预编译头文件 用于使 Visual Studio 中的编译时间更快 当我在 Visual Studio 2012 中创建 C 项目时 还有一个 stdafx cpp 有人可以解释 stdafx h 和 st
  • 将配置文件共享给多个 docker 容器

    假设我的 Docker 主机上有以下配置文件 并且我希望多个 Docker 容器能够访问该文件 opt shared config file yml 在典型的非 Docker 环境中 我可以使用符号链接 例如 opt app1 config
  • 检测舞台何时再次聚焦并加载场景

    我有一个父舞台 可以在其顶部显示弹出窗口 这是代码 private static Stage chooseBreedStage static chooseBreedStage new Stage chooseBreedStage setTi
  • 在tensorflow keras中采样softmax

    我想在 tf keras 中进行采样的 softmax 损失 我通过子类化 keras 模型来定义自己的模型 在 init 中 我指定了所需的层 包括最后一个密集投影层 但是这个密集层不应该在训练中调用 因为我想做采样的softmax并且只
  • 如何在curl命令中传递标头作为参数? [复制]

    这个问题在这里已经有答案了 我正在尝试执行一个使用预定义变量作为标头的curl 命令 header H Content Type application json H userGUID 7feb6e62 35da 4def 88e9 376
  • 如何使用 Selenium 在 Instagram 弹出框架中向下滚动

    我有一个使用 selenium 的 python 脚本来访问给定的 Instagram 个人资料并迭代用户的关注者 在 Instagram 网站上 当点击查看关注者列表时 会打开一个弹出窗口 其中列出了帐户 这里是该网站的屏幕截图 http
  • 我可以将用户限制在 Google 地图上的特定范围和缩放级别吗?

    我正在网页上实现 Google 地图 出于本项目的目的 我想限制用户可以拖动地图的距离 以便他们只能查看位于两个坐标内的某个区域 一个指定西北 另一个指定东南 如果你明白我的意思 使用 Google Maps API 实现此目的的最佳方法是
  • 批处理文件:无法回显循环内的变量

    我已经跌入谷底 我似乎无法完成这项工作 setlocal EnableDelayedExpansion for g in 1 2 3 do set a c g 32 echo c pause 但它说ECHO已打开 我知道这意味着它没有什么可
  • 如何在 iOS 中以编程方式设置宽高比约束? [复制]

    这个问题在这里已经有答案了 我已经为我的视图控制器使用了自动布局 我已经在约束中设置了 V 和 H 位置 但我想知道当按钮变为 5s 6 和 6 Plus 时如何增加按钮大小 这是我为登录按钮添加约束的方式 NSArray btncon V
  • NSFetchedResultsController 和实体继承

    我的模型事件中有一个父实体 还有两个子实体 生日 周年纪念日 我正在使用核心数据中内置的实体继承功能 以便生日和周年纪念日的父对象是事件 所以我使用以下命令进行获取 NSFetchRequest fetchRequest NSFetchRe
  • R tmap 打印意大利

    我想画一张地图 我需要打印的国家 地区是意大利 我使用以下代码 library sf library raster library dplyr library spData library spDataLarge library tmap
  • Bootstrap 4 面包屑中的文本右对齐

    我想右对齐 Bootstrap 4 的面包屑类中的链接 我用 BS3 中的 pull right 类很容易地做到了这一点 但是 BS4 的 float right 并不能完成这项工作 例如
  • Jquery Ajax 请求调用两次并且第一个请求未在标头中发送令牌

    我正在使用 ajax 调用基于 WCF REST 的服务 ajax 方法在页面加载之前调用 我希望在ajax请求的标头中发送一个 Token 在 fiddler 中 我看到的是这样的 1 请求头中没有令牌的服务请求 AJAX 调用失败 2
  • Highstock inputDateParser 触发三次

    我不确定是什么原因导致它在选择日期后触发三次日期日历 http bootstrap datepicker readthedocs org en release index html 这是设置的选项rangeSelector rangeSel
  • 使用 topojson 映射美国邮政编码时出错

    加载美国邮政编码 topojson 文件后 我在 d3 js 中收到错误 groupdata该行未定义 function bind group groupData var i n group length m groupData lengt