Voronoi细胞用D3（v4）填充功能 [英] Voronoi cells fill function with D3 (v4)
问题描述
我正在尝试改写叠加了地图的Voronoi图的示例。
我有一个包含纬度，经度和一些我想使用的信息的csv（例如，用于彩色图的细胞和细菌）
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 :
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）：
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>
但是控制台登录单元格'填充功能不发送任何内容：d不可用。我发现了之前关于StakOverflow的帖子，我认为我的问题非常严重关闭，但我不知道如何使用新的D3 V4修复它。
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.
如果我没记错的话，typeStation函数会转换数组中的csv数据（因为它是voronoi.polygons（）理解的数据类型，仅包含经度和纬度。因此，我试图这样更改它：
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 !
推荐答案
长话短说：
- typeStation函数可重塑将用于Voronoi的csv
- 它可以与csv的任何其他属性一起完成
- 然后，全局函数的参数站可以用作数组
所以，这里是完整的typeStation：
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;
}
之后，在这种情况下，我们想用值的值填充Voronoi单元：
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";
}
});
它工作得很好！
这篇关于Voronoi细胞用D3（v4）填充功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
