尝试在D3JS中修改Voronoi Map [英] Trying to modify Voronoi Map in D3JS

问题描述

我试图修改此D3示例以与我的数据集一起使用

地图显示正好，但数据点，单选按钮和voronoi行不显示（我不是试图显示数据点之间的行，所以代码已删除）。

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

解决方案

这里有一些小事情可以很容易整理，但有些会需要一点工作的。第一个是你使用的是新版本的d3（v3），而你想要复制的例子是一个较旧的版本。在映射侧的事物的版本之间有显着的变化。所以你可以使用旧版本的d3（v2会工作，我想）或调查的变化。

未捕获的TypeError：由于 d3.geom.voronoi（positions）行正在生成NaN，因此正在生成'0'的undefined 错误。我不是100％肯定为什么，但你可以只是过滤这些出来临时修复。一个简单的过滤器将是：

  g.append（svg：path）
 .attr class，cell）
 .attr（d，function（d，i）{
 if（polygons [i] [0] [0]）{
 returnM + polygons [i] .join（L）+Z; 
} 
}）
  

$ b b

如果多边形的第一个元素中没有false值（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变换，函数（d）{returntranslate（+ projection（d.coordinates）+）;}）
 .attr（r，10） 
 

单选按钮（或复选框）不会显示，因为它不是javascript生成的可）。在此示例中，您引用其在html中生成的代码片段：

 < div style =position：absolute; bottom ：0; font-size：18px;> 
< input type =checkboxid =voronoi> < label for =voronoi>显示Voronoi< / label> 
< / div> 
  

一旦你完成这个工作，你需要得到voronoi行工作。我认为与你的代码一样，voronoi行将不会显示为复选框未选中。所以你可以评论这些线，看看会发生什么。一个快速提示的路径是，如果你想只是显示线，你需要设置填充样式为无和笔触到任何你想要的颜色。如果你没有设置填充为无，你会得到一个黑色的屏幕。

I am trying to modify this D3 example to use with my dataset

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

I think my problem is creating the array of coordinates for calculating the Voronoi polygons, but at this point I'm not sure.

I'm getting a Uncaught TypeError: Cannot read property '0' of undefined error that points to the line where I am calling the array. The code is live, please see here

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

The map displays just fine, but the data points, the radio button, and the voronoi lines do not appear (I'm not trying to show lines between data points, so that code has been removed).

Any thoughts or suggestions would be most appreciated. Many thanks!

解决方案

There are a number of small things going on here which can be easily sorted out but some will require a bit of work. The first is that you're using a new version of d3 (v3) and the example you're trying to replicate is an older version. There have been significant changes between the versions on the mapping side of things. So you can either use an old version of d3 (v2 will work I think) or investigate the changes.

The Uncaught TypeError: Cannot read property '0' of undefined error is being generated because d3.geom.voronoi(positions) line is producing NaN. I'm not 100% sure why but you could just filter these out to get a temporary fix. A simple filter would be something like:

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

with the if true when there is not a false value (NULL, NaN, etc) in the first element of the polygon. Please note that this is temporary fix while you investigate why you're getting NaN and this will not produce the correct voronoi polygons.

The fix for the data points is very simple, you just have to set the radius to something greater than 0 such as 10 (although I imagine that you might want to scale the dots to a property of your data like TotalPublished). For instance see the last line:

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);

The radio button (or checkbox) does not show up as it's not generated by the javascript (although it can be). In the example you refer to its generated in the html in this snippet:

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

Once you've worked through this you'll need to get the voronoi lines working. I think with your code as is the voronoi lines won't show up as the checkbox is not checked. So you could comment these lines out and see what happens. A quick tip with paths is that if you want to just show the lines you need to set the fill style to none and the stroke to whatever colour you want. If you don't set the fill to none you'll just get a black screen.

这篇关于尝试在D3JS中修改Voronoi Map的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！