我正在尝试改编 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 不可用。我发现this previous post on 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;
}
目标是直接在数组中添加名称(用于工具提示)和值(用于条件填充)。但问题还是一样...
无论如何，提前致谢!
最佳答案
长话短说:
- typeStation 函数 reshape 将用于 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";
}
});
而且效果非常好!
关于javascript - Voronoi 细胞使用 D3 (v4) 填充函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47236733/