Trying to modify Voronoi Map in D3JS

问题

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!

回答1:

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.

来源：https://stackoverflow.com/questions/18727925/trying-to-modify-voronoi-map-in-d3js

标签

d3.js

voronoi