Skip to content
← 返回 hands-on-data-visualization
← 返回 hands-on-data-visualization

ch-0017 Appendix A: Fix Common Problems

  • 原书章节: Appendix A Fix Common Problems（pp. 429–443）
  • 输入来源: 本地 pdf（HandsOnDataViz.pdf）

摘要

排查手册：工具或平台出错时如何诊断与修复——"弄明白它为什么坏，是理解它背后原理的 绝佳途径"。开头教读者如何求助：清楚描述问题、说明操作系统/浏览器版本、附截图（附录 给出 Chromebook / Mac / Windows 的截图快捷键）。按症状分节：

  • Tool or platform problems：先查官方文档/FAQ、看平台状态页（status page）、区分 是工具故障还是自己的操作问题
  • Try a different browser：很多问题源于浏览器，换 Firefox / Chrome / Safari / Edge 即可；勿用已停止维护的 Internet Explorer / Edge Legacy（微软 2020 年宣布退役）
  • Diagnose with developer tools：用浏览器开发者工具（F12）的 Console 窗口看报错 信息，是定位代码/数据问题的关键手段
  • Mac or Chromebook problems：Mac 需注意文件扩展名显示等设置；Chromebook 能跑 大部分网页工具（Google Sheets、My Maps、Datawrapper 等）
  • Watch out for bad data：很多"工具问题"其实是数据问题——如 Google Sheets 驱动的地图 里有空行会直接弄坏地图（衔接 ch-0013）；常见报错 Uncaught Error: Invalid LatLng object: (NaN, NaN) 即坐标数据缺失/非法
  • Common iframe errors：嵌入不显示时先回 ch-0010 核对 embed code；可用 W3Schools TryIt 页面隔离测试 iframe
  • Fix your code on GitHub：改代码出错时回到 ch-0011 的流程检查（分支、文件路径、 EDIT here 位置、Pages 发布是否生效）

要点归纳

  • 排错顺序：数据 → 浏览器 → 工具/平台 → 代码；多数"神秘故障"源头是坏数据
  • 浏览器 Console 是免费且最直接的诊断窗口
  • Google Sheets 里的空行/空单元格会生成 NaN 坐标，弄坏 Leaflet 地图
  • 换浏览器 + 看状态页，能解决大部分平台问题
  • 求助时给足信息：症状、系统/浏览器版本、截图

术语 / 概念

  • developer tools（开发者工具） — 浏览器内置的调试面板，重点是 Console
  • Console（控制台） — 显示 JS 报错与日志的窗口
  • status page（状态页） — 服务商公布在线/故障状态的页面
  • NaN（Not a Number） — 非法数值；地图报错 Invalid LatLng object: (NaN, NaN) 通常表示坐标字段缺失
  • iframe errors — 嵌入不显示/变形等问题的总称（对应 ch-0010）

原句摘录

Figuring out why it broke—and how to fix it—can be a great way to learn what's happening behind the scenes.

Some of the thorniest problems may be caused by two or more separate issues.

疑问 / 待查

  • 附录 B（Publishing with Bookdown）未含在本 PDF 内——作者用 Bookdown + GitHub + Zotero 写作本书的工作流，可另查 HandsOnDataViz.org
  • 截图快捷键清单可整理成速查表备用
Backlinks (1) 
flowchart LR
  n0["ch-0001 Introduction（为什么做数据可视化）"]
  n1["ch-0002 选工具讲你的数据故事（Ch 1）"]
  n2["ch-0003 强化电子表格技能（Ch 2）"]
  n3["ch-0004 找到并质询你的数据（Ch 3）"]
  n4["ch-0005 清洗脏数据（Ch 4）"]
  n5["ch-0006 做有意义的比较（Ch 5）"]
  n6["ch-0007 图表化你的数据（Ch 6）"]
  n7["ch-0008 地图化你的数据（Ch 7）"]
  n8["ch-0009 表格化你的数据（Ch 8）"]
  n9["ch-0010 嵌入网页（Ch 9）"]
  n10["ch-0011 用 GitHub 编辑与托管代码（Ch 10）"]
  n11["ch-0012 Chart.js 与 Highcharts 模板（Ch 11）"]
  n12["ch-0013 Leaflet 地图模板（Ch 12）"]
  n13["ch-0014 转换你的地图数据（Ch 13）"]
  n14["ch-0015 识别谎言、减少偏差（Ch 14）"]
  n15["ch-0016 讲述并展示你的数据故事（Ch 15）"]
  n16["ch-0017 附录 A 排查常见问题"]
  n17["Hands-On Data Visualization（整理完成）"]
  n18["Hands-On Data Visualization 笔记"]
  n19["Reading"]
  n17 --> n0
  n17 --> n1
  n17 --> n2
  n17 --> n3
  n17 --> n4
  n17 --> n5
  n17 --> n6
  n17 --> n7
  n17 --> n8
  n17 --> n9
  n17 --> n10
  n17 --> n11
  n17 --> n12
  n17 --> n13
  n17 --> n14
  n17 --> n15
  n17 --> n16
  n17 --> n18
  n19 --> n17
  click n0 "../ch-0001/" "ch-0001 Introduction（为什么做数据可视化）"
  click n1 "../ch-0002/" "ch-0002 选工具讲你的数据故事（Ch 1）"
  click n2 "../ch-0003/" "ch-0003 强化电子表格技能（Ch 2）"
  click n3 "../ch-0004/" "ch-0004 找到并质询你的数据（Ch 3）"
  click n4 "../ch-0005/" "ch-0005 清洗脏数据（Ch 4）"
  click n5 "../ch-0006/" "ch-0006 做有意义的比较（Ch 5）"
  click n6 "../ch-0007/" "ch-0007 图表化你的数据（Ch 6）"
  click n7 "../ch-0008/" "ch-0008 地图化你的数据（Ch 7）"
  click n8 "../ch-0009/" "ch-0009 表格化你的数据（Ch 8）"
  click n9 "../ch-0010/" "ch-0010 嵌入网页（Ch 9）"
  click n10 "../ch-0011/" "ch-0011 用 GitHub 编辑与托管代码（Ch 10）"
  click n11 "../ch-0012/" "ch-0012 Chart.js 与 Highcharts 模板（Ch 11）"
  click n12 "../ch-0013/" "ch-0013 Leaflet 地图模板（Ch 12）"
  click n13 "../ch-0014/" "ch-0014 转换你的地图数据（Ch 13）"
  click n14 "../ch-0015/" "ch-0015 识别谎言、减少偏差（Ch 14）"
  click n15 "../ch-0016/" "ch-0016 讲述并展示你的数据故事（Ch 15）"
  click n16 "./" "ch-0017 附录 A 排查常见问题"
  click n17 "../" "Hands-On Data Visualization（整理完成）"
  click n18 "../notes/" "Hands-On Data Visualization 笔记"
  click n19 "../../" "Reading"