Voronoi cells fill function with D3 (v4)

问题

I'm trying to adapt this example of a Voronoi's diagram superimposed with a map.

I've got a csv with latitude, longitude and several informations I want to use (for example to color diagram's cells and germs)

Here's the first rows of the csv :

name,value,latitude,longitude
station1,18921,48.8286765,7.742563499999999
station2,73187,48.905260999999996,7.6535345
station3,146444,48.9310582,7.658132000000001
station4,61442,48.8334661,8.029873799999999
station5,107423,48.665965899999996,7.717782400000001
station6,14808,49.0559404,7.1410655
station7,1137493,48.744460600000004,7.362080199999999
station8,5684,48.934732700000005,8.1615803

Then, HTML (with CSS and JSS inside) :

<!DOCTYPE html>    
<html>
<style>

.train_station {
  fill:#4e7d92;
}

.cell {
  stroke: #000;
  fill-opacity: 0.6;
  stroke-opacity: 0.3;
  cursor: pointer;
}


.cell :hover {
  fill:#000;
  stroke: #000;
  fill-opacity: 0.7;
  stroke-opacity: 0.3;
  cursor: pointer;
}

</style>

<head>
    <meta charset="utf-8">
</head>

<body>
    <div id="map"></div>

    <script src="http://d3js.org/d3.v4.min.js"></script>       
    <script src="http://d3js.org/topojson.v2.min.js"></script>
    <script type="text/javascript">
            // first, dimensions, projection and others basic variables

            var width = 700,
                height = width*0.85;

            var proj = d3.geoMercator()
                    .center([5.8287, 48.8320])
                    .scale(width * 11.5)
                    .translate([width / 2, height / 2]);

            var path = d3.geoPath()
                         .projection(proj)
                         .pointRadius(width*0.0019);

            var radius = d3.scaleSqrt()
                .domain([0, 100])
                .range([0, 14]);

            var voronoi = d3.voronoi()
                .extent([[-1, -1], [width + 1, height + 1]]);

             var svg = d3.select("#map").append("svg")
                .attr("width", width)
                .attr("height", height);

            d3.queue()
              .defer(d3.csv,"my_csv.csv", typeStation)
              .await(ready)
            // the typeStation function is very important
            function ready(err, stations) {

                // first selection
                var station = svg.selectAll(".station")
                                 .data(stations)
                                 .enter()
                                 .append("g")
                                 .attr("class", "station");

                // Voronoi's transformation with previous selection
                station.append("path")
                       .data(voronoi.polygons(stations.map(proj)))
                       .attr("class", "cell")
                       .attr("d", function(d) { return d ? "M" + d.join("L") + "Z" : null; })
                       .attr("fill", function(d){
                           // Probleme is here
                           console.log(d)
                       });

                svg.append("path")
                   .datum({type: "MultiPoint", coordinates: stations})
                   .attr("class", "train_station")
                   .attr("d", path);  

        };

        // and the function to parse latitude and longitude of csv
        function typeStation(d) {
          d[0] = +d.longitude;
          d[1] = +d.latitude;
          return d;
        }

    </script>
</body>

But the console log in cells' fill function sends nothing : d is unavailable. I found this previous post on StakOverflow and I think my issue is very close, but I don't know how to fix it with new D3 V4.

If I am not mistaken, the typeStation function transforms the csv data in an array (because it's the data type that voronoi.polygons() understands), with just latitude and longitude. So I tried to change it like this :

 function typeStation(d) {
                       d[0] = +d.longitude;
                       d[1] = +d.latitude;
                       d[2] = +d.name;
                       d[3] = +d.value;
                       return d;
                       }

The goal was to add name (for tooltip) and value (for conditionnal filling) directly in the array. But issue is still the same...

Thanks in advance anyway !

回答1:

Long story short :

the typeStation function reshapes the csv that will be used for Voronoi
it could be completed with any other "property" of the csv
then, the argument stations of the global function can be used as an array

So, here the complete typeStation :

 function typeStation(d) {
                       d[0] = +d.longitude;
                       d[1] = +d.latitude;
                       d[2] = d.name; // = + can't work with a String
                       d[3] = +d.value;
                       return d;
                       }

And after that, in the case we want fill Voronoi cells with value's values :

            station.append("path")
                   .data(voronoi.polygons(stations.map(proj)))
                   .attr("class", "cell")
                   .attr("d", function(d) { return d ? "M" + d.join("L") + "Z" : null; })
                   .attr("fill", function(d){
                       if (d[3] < 60000) {
                       return "#c0c0c0";
                       }
                       // other cases, etc...
                       else {
                       return "#fff";
                       }
                   });

And it worked perfectly fine !

来源：https://stackoverflow.com/questions/47236733/voronoi-cells-fill-function-with-d3-v4

标签

javascript

d3.js

voronoi