尝试修改D3JS中的Voronoi Map

Question

我正在尝试修改此D3示例以与我的数据集

一起使用

http://mbostock.github.io/d3/talk/20111116/airports.html

我认为我的问题是创建用于计算Voronoi多边形的坐标数组，但此时我不确定。

我收到Uncaught TypeError: Cannot read property '0' of undefined错误，指向我调用数组的行。代码是实时的，请看这里

http://cds.library.brown.edu/projects/mapping-genres/symbol-maps/brown-voronoi-map.html

地图显示得很好，但数据点，单选按钮和voronoi线没有出现（我不是试图在数据点之间显示线条，因此代码已被删除）。

任何想法或建议都会非常感激。非常感谢！

Answer 1

这里有许多小事情可以很容易地解决，但有些需要一些工作。首先，您使用的是新版本的d3（v3），而您尝试复制的示例是旧版本。事物映射方面的版本之间发生了重大变化。因此，您可以使用旧版本的d3（我认为v2可行）或调查更改。

正在生成Uncaught TypeError: Cannot read property '0' of undefined错误，因为d3.geom.voronoi(positions)行正在生成NaN。我不是百分百肯定为什么，但你可以过滤掉这些以获得临时修复。一个简单的过滤器就像：

  g.append("svg:path")
      .attr("class", "cell")
      .attr("d", function(d, i) {
        if (polygons[i][0][0]) { 
          return "M" + polygons[i].join("L") + "Z";
          }
        })

如果在多边形的第一个元素中没有false值（NULL，NaN等），则返回if。请注意，这是一个临时修复，当您调查为什么你得到NaN，这将不会产生正确的voronoi多边形。

数据点的修复非常简单，您只需将半径设置为大于0的值（例如10）（尽管我想您可能希望将点缩放到数据的属性，如TotalPublished）。例如，见最后一行：

circles.selectAll("circle")
      .data(locations.rows
      .sort(function(a, b) { return b.TotalPublished - a.TotalPublished; }))
    .enter().append("svg:circle")
      .attr("transform", function(d) { return "translate(" + projection(d.coordinates) + ")"; })
      .attr("r", 10);

单选按钮（或复选框）没有显示，因为它不是由javascript生成的（虽然它可以）。在示例中，您可以参考此代码段中的html中生成的内容：

<div style="position:absolute;bottom:0;font-size:18px;">
  <input type="checkbox" id="voronoi"> <label for="voronoi">show Voronoi</label>
</div>

一旦你完成了这项工作，你就需要让voronoi线工作。我认为使用您的代码，因为未检查复选框，voronoi行不会显示。所以你可以评论这些线，看看会发生什么。带路径的快速提示是，如果您只想显示线条，则需要将填充样式设置为无，并将笔划设置为您想要的任何颜色。如果你没有将填充设置为无，你就会得到一个黑屏。