Voronoi细胞用D3（v4）填充功能

Question

I'm trying to adapt this example of a Voronoi's diagram superimposed with a map . 我正在尝试改写Voronoi图与地图叠加的示例。

I've got a csv with latitude, longitude and several informations I want to use (for example to color diagram's cells and germs) 我有一个包含纬度，经度和一些我想使用的信息的csv（例如，对颜色图的细胞和细菌进行着色）

Here's the first rows of the csv : 这是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) : 然后，HTML（其中包含CSS和JSS）：

<!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. 但是控制台登录单元格的填充功能未发送任何内容：d不可用。 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. 我在StakOverflow上找到了上一篇文章，我认为我的问题已经非常接近了，但是我不知道如何使用新的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. 如果我没记错的话，typeStation函数将纬度和经度转换为数组中的csv数据（因为它是voronoi.polygons（）理解的数据类型）。 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 ! 还是要提前谢谢！

Answer 1

Long story short : 长话短说：

the typeStation function reshapes the csv that will be used for Voronoi typeStation函数可重塑将用于Voronoi的csv
it could be completed with any other "property" of the csv 它可以与csv的任何其他“属性”一起完成
then, the argument stations of the global function can be used as an array 然后，全局函数的参数站可以用作数组

So, here the complete typeStation : 因此，这里是完整的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 : 然后，在这种情况下，我们想用值的值填充Voronoi单元：

            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 ! 而且效果很好！

Voronoi细胞用D3（v4）填充功能

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-10-18 12:13:06

Voronoi细胞用D3（v4）填充功能

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-10-18 12:13:06

解决方案1
0 已采纳 2018-10-18 12:13:06