d3 Topojson 调试转换答案

【问题标题】：d3 Topojson debugging transformationsd3 Topojson 调试转换
【发布时间】：2017-10-31 01:21:34
【问题描述】：

是否有一般的 d3/topojson 调试提示？我对这种格式比较陌生，并通过 d3 为美国各州进行了可视化。 JavaScript 和 d3 适用于我手头的 topojson 文件。但是，将文件更改为具有更多描述的内容时，没有引发任何错误或问题，但我得到了以下结果：

我不想发布整个 json，因为它非常大，但是在 d3 中处理 topojson 可视化时，您有什么调试方法可以推荐吗？我假设错误与转换有关，但我不确定如何处理和解决问题。

var svg = d3.select("#map1");
var path = d3.geoPath();
svg.append("g")
   .attr("class", "states")
   .selectAll("path")
   .data(topojson.feature(x, x.objects.states).features)
   .enter()

更新：不寻找任何人来显式调试我的代码。我需要了解其他项目出了什么问题。但如果这有帮助，这里是整个 topojson 的一个非常小的示例：

{"type":"Topology",
 "arcs":[[[1071248,837478],[27,35],[64,83],[44,75],[38,57],[42,29],[32,-10],[38,-33],[35,-57],[32,-447],[-10,-33],[-28,6],[-216,188],[-85,81],[-13,26]],... ]
 "transform":{"scale":[0.00008503679331736181,0.00005379922226014208],
              "translate":[-179.148909,-14.548699000000001]},
 "objects":{"states":{"type":"GeometryCollection",
                      "geometries":[ {"arcs":[[[0]],[[1]],[[2]],[[3]],[[4]],[[5]],[[6,7,8,9,10]]],
                                      "type":"MultiPolygon",
                                      "properties":{"STATEFP":"01",
                                                    "STUSPS":"AL",
                                                    "NAME":"Alabama"}},...

Update2：这是有效的 topojson。

{"type":"Topology",
 "bbox":[-56.77775821661018,12.469025989284091,942.7924311762474,596.9298966319916],
 "transform":{"scale":[0.009995801851947097,0.005844667153098606],
              "translate":[-56.77775821661018,12.469025989284091]},
 "objects":{"states":{"type":"GeometryCollection","geometries":[{"type":"Polygon","arcs":[[0,1,2,3,4]],"id":"05089"},....

都是topojson格式，可以通过mapshaper.org进行验证，但略有不同。谁能解释一下这些差异。

【问题讨论】：

你可以尝试在mapshaper.org加载topojson文件。
我已经尝试在诸如此类的一些地图查看器中验证 topojson 文件。他们都以正确的格式返回地图
如果你包含你的 topojson 的一部分，它可能会有所帮助。文件的开头和结尾的一些内容应该会有所帮助。此外，包括您的 d3 投影参数也会有所帮助。

标签： javascript d3.js topojson

【解决方案1】：

显然变换属性刚刚关闭。这些线的生成长度是我的 svg 大小的 1/1000。因为线条有一定的要求粗细，所以看起来像一些斑点；地图已正确生成。

我想回答我自己的问题，只需使用 topojson 属性，直到它类似于您想要的东西。如果 JavaScript 没有崩溃，则假设地图已正确加载（但可能不符合您的标准）

一般清单：

确保文件是正确的 topojson 格式（这可以在mapshaper.org 上确认甚至转换）
确保 topojson 文件正确加载。这可以用一些console.log's 进行测试
确保数据特征指向 topojson 的正确对象。对我来说这是x.objects.states
如果地图加载成功，但看起来有问题，请考虑“变换”中的异常

【讨论】：