奇怪的轴行为

Question

我有一张彩色编码的中国地图，它工作正常，直到我在地图右侧添加了色标和轴。您可以在这里查看：

https://bl.ocks.org/diggetybo/4c42aafc20c21e416585c9e37079eda2

问题是，我加轴后少了一个省份。通过丢失，我的意思是它不再可见。我不确定它是否真的还在那里，但填充了 none，或者由于某种原因，路径没有完全绘制出来。它也是一个非常大的省份，位于中国西北部。对于那些地理硬核，省份的名字是新疆。

起初我确信这是我的用户错误，但经过大量努力后我慢慢开始怀疑它可能是某种错误。我确实设法将范围缩小到哪一行：第 69 行，或下面代码段中的 .call(axis); 行：

var axisNodes = svg.append('g')
    .attr('transform', 'translate(' + (margins.left+865) + ',' + (margins.top) + ')')
    .call(axis);
styleAxisNodes(axisNodes);

我真的隔行注释掉了，只有.call(axis);行让省消失了。你可以自己试试，把第69行注释掉，省就会重新出现。

我的问题： 轴与我代码中完全不同的部分有什么关系，json 已解析地图路径的填充？为什么只影响那个省份？我该怎么做才能避免这种情况？

谢谢

Answer 1

当您在 d3.json 函数中执行此操作时：

svg.selectAll("path")

您实际上是在 select 建立一个已经存在的路径，这是轴的路径，并将数据绑定到它。

因此，您的 "enter" select离子将少一个元素。

解决方案：select不存在的东西：

svg.selectAll("foo")

这是您更新后的 bl.ocks：https://bl.ocks.org/anonymous/387781c5bccb0339141b519c098f5605

PS：另一种解决方案是在绘制地图后调用轴。

PPS:"Why did it only affect that province?"那个省是数据中的第一个

奇怪的轴行为

Strange Axis Behavior

d3.js

topojson