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

Question

我有一個包含緯度，經度和一些我想使用的信息的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不可用。 我在StakOverflow上找到了上一篇文章，我認為我的問題已經非常接近了，但是我不知道如何使用新的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的任何其他“屬性”一起完成
然后，全局函數的參數站可以用作數組

因此，這里是完整的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）填充功能

問題描述

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