0

我正在尝试修改此 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 线（我不想显示数据点之间的线，因此代码已被删除）。

任何想法或建议将不胜感激。非常感谢！

4

1 回答 1

0

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

Uncaught TypeError: Cannot read property '0' of undefined正在生成错误，因为lined3.geom.voronoi(positions)正在生成 NaN。我不是 100% 确定为什么，但你可以过滤掉这些以获得临时修复。一个简单的过滤器将类似于：

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

当多边形的第一个元素中没有错误值（NULL、NaN 等）时，如果为 true。请注意，这是在您调查获得 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 行。所以你可以把这些行注释掉，看看会发生什么。路径的快速提示是，如果您只想显示线条，则需要将填充样式设置为无，并将笔划设置为您想要的任何颜色。如果您不将填充设置为无，则只会出现黑屏。

于 2013-09-11T00:50:32.293 回答