使用 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 映射美国邮政编码时出错 的相关文章

  • 使用 D3.js 单击切换图例时重绘堆栈条形图

    我想使用 D3 js 实现带有切换图例的堆栈栏 单击图例时 堆栈栏应重新绘制 如果图例处于活动状态 则与图例对应的矩形板应消失 反之亦然 单击图例时 我无法正确更新与组元素和组元素内存在的矩形元素绑定的数据 在 DOM 树中 单击图例 矩形
  • D3 V6 - 缩放和拖动功能

    在 Angular 7 中使用 D3 v6 创建世界地图 Choropleth 从 Angular 精简为纯 JavaScript 从 NaturalEarth 收集并在 mapshaper 中编译的形状文件以创建 GeoJSON 只对国家
  • 在 Power BI 自定义视觉对象中使用 d3.js 库绘制一条线

    我正在努力在 Power BI 自定义视觉对象中绘制一条单线 Power BI 中的报表是使用 TypeScript 和 d3 js v 3 0 编写的 我可以用轴绘制图表 但没有出现线条 在 HTML 文件中使用纯 d3 js 确实很容易
  • 从 csv 更新数据时,d3 在 setInterval 上闪烁文本

    我是 d3 的新人 学习了很多东西 我在更新从 csv 文件获取的数据时遇到了一些问题 我使用 setInterval 每秒更新数据 当它删除并再次插入数据时 它会闪烁几毫秒 表消失并生成新表 我究竟做错了什么 我怎样才能消除闪烁 感谢您的
  • D3.js 如何将我的真实数据合并到饼图中

    我是 D3 和数据可视化的新手 在加载真实数据时遇到一些问题 您将在以下部分中找到我的代码 现在我有一些数据存储在数组中 现在我想做的是将数据库中的实际数据存储到饼图中 另外 如果我这样做 var mydata d3 json mydata
  • SVG 路径超出 d3 画笔上的图表区域

    当我尝试刷动和缩放折线图的一部分时 所选区域的某些部分会呈现在图表之外 代码和行为再现可以在以下位置找到这个jsbin https jsbin com jamojonaqu edit js output 单击并拖动以选择一部分并放大 双击以
  • d3树计算所有孩子的数量

    我有一个基于以下内容的 d3 树 http bl ocks org mbostock 1093025 http bl ocks org mbostock 1093025 我如何计算所有孩子的数量 我已经尝试过这个 但是它计算了树中的所有行
  • Angular svg 或 canvas 使用颜色渐变

    我正在使用 Angular 和 d3 创建一个甜甜圈 在指令中 我可以非常简单地给填充区域指定颜色 在这个 plunker 中它是蓝色 但我想做的是让 SVG 平滑地改变其颜色 0 33 3 red 33 4 66 66 orange 66
  • D3:打字机风格的文本过渡

    In this jsfiddle http jsfiddle net VividD QbysN 标签通过减小旧文本的字体 然后增加新文本的字体 从一个文本过渡到另一个文本 但是 我希望新文本以 打字机 方式出现 就像这样jsfiddle h
  • R/d3heatmap/shiny - 有没有办法在 d3 工具提示中嵌入图像?

    我想在滚动单元格时在 d3 工具提示中嵌入图像 而不是默认的行 列 值数据 library shiny library d3heatmap ui lt shinyUI fluidPage titlePanel Old Faithful Ge
  • 分层边缘捆绑:添加父组标签

    我对 HTML 和 JavaScript 还很陌生 我面临着著名的分层边缘捆绑可用here https bl ocks org mbostock 7607999 由 D3 js 库生成 My goal is to add a semi ci
  • d3.forcesimulation() 链接距离

    我在堆栈上查看了不同的链接距离 似乎为了改变链接距离 您需要实现一个函数 然后传递它来动态分配链接距离 如下所示 function linkDistance d return d distance 然后我认为我可以传递给 svg 但返回函数
  • d3.js 和 Chart.js 之间的比较(仅适用于图表)[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我在项目中多次使用过 Chart js 但从未使用过 d3 js 很多人说 d3 js 是最好的图表 javascript 框架 但没
  • 通过 Fabric.js 推送 D3.js 输出以支持 IE8?

    我正在评估Fabric js http fabricjs com 作为替代拉斐尔 js http raphaeljs com 用于创建与 IE8 兼容的交互式可视化 IE8 不支持 SVG 或画布 不幸的是 IE8 支持是不可协商的 Rap
  • 寻找一种重构 D3.js 风格的方法链接模式的方法

    在学习 D3 js 时 我遇到了博客文章 http bost ocks org mike chart 解释其可重用代码单元背后的主要设计模式 我复制了下面的相关代码 下面呈现的模式的方式正是在 D3 代码库和插件中使用的方式 example
  • 如何在 d3.scale.ordinal() 中指定域?

    var W 100 var H 200 var data v 4 v 8 v 15 v 16 v 23 v 42 var x d3 scale linear domain 0 max x range 0 W var y d3 scale o
  • NVD3/D3改变y轴最小值

    我目前正在使用 NVD3 制作一些折线图 我想知道是否可以使 y 轴刻度始终从 0 开始 目前它始终从最低的 y 值开始 我尝试过使用tickValues 但我不想更改其他值 我还尝试添加值为 0 的数据点 但这似乎是一种解决方法 它会影响
  • D3js 多折线图 mouseOver

    我正在努力适应this http bl ocks org mbostock 3902569D3js 折线图示例 将鼠标悬停在我的多线图表上的使用情况 看起来d3 mouse this 0 on the mousemove函数生成以下错误 无
  • d3 地理投影从正交到 X 的过渡

    我正在开发一个教育地图项目 其中显示不同的地图投影 我想在选择不同投影之间实现变形过渡 我找到了一个很好的例子来实现它 并且我没有遇到太多的麻烦来重新创建它 不幸的是 我还需要裁剪投影的功能 这与目标状态完美配合 但在改变投影时则不然 当选
  • 使用 D3.js 解析时间序列数据

    是时候寻求帮助了 我已经学习 D3 js 几个星期了 我才开始觉得我理解了其中的 10 哈哈哈 我正在尝试生成一个非常简单的线图 只要数据非常简单 我就可以做到这一点 但我的原始数据源具有 UTC 时间戳和实数 小数 这会导致任何超出简单范

随机推荐

  • 优雅关闭失败

    我有一个带有 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