ฉันสามารถพล็อตข้อมูลสภาพอากาศบางส่วนลงบนแผนที่ได้โดยใช้โค้ดต่อไปนี้ อย่างไรก็ตาม จุดต่างๆ นั้นเป็นสี่เหลี่ยมและฉันอยากให้มันเรียบขึ้น
,
ฉันต้องการให้พล็อตมันราบรื่นขึ้นเหมือนกับสิ่งที่คล้ายกับ
ฉันเชื่อว่าฉันต้องดูการประมาณค่า การวิเคราะห์เชิงพื้นที่ และ/หรือแผนที่ Choropleth ฉันคิดว่ามันเป็นอัลกอริธึมที่แตกต่างกันในการทำเช่นนี้ ฉันรู้สึกว่าฉันต้องเติมคะแนนเพิ่มเติมระหว่างจุดที่มีอยู่ใช่ไหม และด้วยเหตุนี้ เป็นไปได้ไหมที่จะสร้างการไล่ระดับสีแบบจุด? สิ่งนี้สามารถทำได้ใน D3 หรือไม่? หรือฉันควรพิจารณาใช้สิ่ง three.js หรือ WebGL
var width = 960,
height = 960;
var map = {};
var projection = d3.geo.mercator()
.scale((width + 1) / 2 / Math.PI)
.translate([width / 2, height / 2])
.precision(.1);
var path = d3.geo.path()
.projection(projection);
var graticule = d3.geo.graticule();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
d3.json("world-50m.json", function(error, world) {
svg.insert("path", ".graticule")
.datum(topojson.feature(world, world.objects.land))
.attr("class", "land")
.attr("d", path);
svg.insert("path", ".graticule")
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
.attr("class", "boundary")
.attr("d", path);
});
map.plot_points = [];
map.max = 30;
map.min = -1;
var opacity = d3.scale.linear()
.domain([map.min, map.max])
.range([0,1]);
var rainbow = ["#CE0C82", "#800CCE", "#1F0CCE", "#0C5BCE", "#0C99CE", "#2ECE0C", "#BAE806", "#FEFF00", "#FFCD00", "#FF9A00", "#FF6000", "#FF0000"];
zs.forEach(function(zv,zi){
zv.forEach(function(zzv, zzi){
if(zzv != 999)
{
map.plot_points.push({lat: ys[zi], long:xs[zzi],value:zzv});
}
})
});
console.log(map);
var points = svg.selectAll("rects.points")
.data(map.plot_points)
.enter()
.append("rect")
.attr("class", "points")
.style("fill", function(d) {
var scale = d3.scale.linear().domain([map.min, map.max]).range([1, rainbow.length]);
return rainbow[Math.round(scale(d.value))];
}).attr("width", 8)
.attr("height", 8)
.style("fill-opacity", 1)
.attr("transform", function(d) {
return "translate(" + projection([d.long, d.lat]) + ")";
})