Javascript 如何使用投影使d3.js中的打印点平滑?
我能够使用以下代码将一些天气数据绘制到地图上。然而,这些点是矩形的,我想让它们更平滑 , 我想把它们画得更平滑一些,就像 我认为我需要研究插值、空间分析和/或Choropleth地图。我认为这是不同的算法。我觉得我需要在现有点之间填入更多点?有了它,就有可能产生类似梯度的点吗?这在D3中可行吗?或者我应该考虑使用3JS或WebGL的东西?< /P>Javascript 如何使用投影使d3.js中的打印点平滑?,javascript,map,d3.js,gis,map-projections,Javascript,Map,D3.js,Gis,Map Projections,我能够使用以下代码将一些天气数据绘制到地图上。然而,这些点是矩形的,我想让它们更平滑 , 我想把它们画得更平滑一些,就像 我认为我需要研究插值、空间分析和/或Choropleth地图。我认为这是不同的算法。我觉得我需要在现有点之间填入更多点?有了它,就有可能产生类似梯度的点吗?这在D3中可行吗?或者我应该考虑使用3JS或WebGL的东西?< /P> var width = 960, height = 960; var map = {}; var projection = d3.geo.merc
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]) + ")";
})
听起来你的问题在于数据。您需要做的是获取原始数据并将其插值为更平滑的形式。为此,可以使用GIS程序,例如。具体如何做取决于原始数据的格式
一旦你有了更平滑的数据,你可以在D3中再次绘制它。我的猜测是,最终结果与我所做的有点类似,绘制的等高线与您的目标效果基本相同。杰森·戴维斯(Jason Davies)写了一个conrec算法的实现,它完全满足您的需要:
它里面有一个工作示例我相信白色条纹的出现是因为你使用的投影; 事实上,从赤道向北和向南,每个矩形的高度都应该相应地调整,因为墨卡托投影改变了向北和向南的距离。
要获得固定高度的矩形,可以尝试使用此投影:
它保留了南北方向的维度也许你可以看看热图 虽然是基于点的,但它可能会给你一个提示。
它使用canvas而不是svg。我认为conrec.js是前进之路或d3.geo.contour(),但是如何将a(经度、纬度、值)或(x、y、值)转换为等高线?在示例中,您可以看到需要三个数组,其中x,y和值:我不知道这是否是你的问题……使用什么样的算法来生成更平滑的数据?我一直只想通过Javipt来做这件事。conrec是最接近的,但是它只在偶数点上工作;我强烈建议为此使用GIS程序。