Voronoi 细胞用 D3 (v4) 填充函数

Question

我正在尝试改编 a Voronoi's diagram superimposed with a map 的这个例子。

我有一个包含纬度、经度和一些我想使用的信息的 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

然后，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>

但是单元格的填充函数中的控制台日志没有发送任何内容：d 不可用。我发现，我认为我的问题非常接近，但我不知道如何使用新的 D3 V4 修复它。

如果我没记错的话，typeStation 函数将 csv 数据转换为一个数组（因为它是 voronoi.polygons() 理解的数据类型），只有纬度和经度。所以我试着像这样改变它：

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

目标是直接在数组中添加名称（用于工具提示）和值（用于条件填充）。但是问题还是一样...

提前致谢！

Answer 1

长话短说：

typeStation 函数重塑将用于 Voronoi 的 csv
它可以与 csv
那么，全局函数的参数stations可以作为数组使用

所以，这里是完整的 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;
                       }

然后，如果我们想用值的值填充 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";
                       }
                   });

而且效果非常好！

Voronoi 细胞用 D3 (v4) 填充函数

Voronoi cells fill function with D3 (v4)

javascript

voronoi

d3.js