如何使用投影使我的绘图点在 d3.js 中平滑？答案

【问题标题】：How do make my plot points smooth in d3.js using projection?如何使用投影使我的绘图点在 d3.js 中平滑？
【发布时间】：2013-12-06 05:05:20
【问题描述】：

我可以使用以下代码将一些天气数据绘制到地图上。但是这些点是矩形，我想让它们更平滑。

我想将它们绘制得更平滑，类似于

我认为我需要研究插值、空间分析和/或 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]) + ")";
})

【问题讨论】：

标签： javascript map d3.js gis map-projections

【解决方案1】：

听起来你的问题是数据。您需要做的是获取原始数据并将其插入到更平滑的形式。为此，您可以使用 GIS 程序，例如 QGIS。具体如何执行取决于您的原始数据的格式。

获得更平滑的数据后，您可以在 D3 中再次绘制它。我的猜测是，最终结果会与我所做的 here 有点相似，其中绘制轮廓线的效果与您的目标大致相同。

【讨论】：

使用什么样的算法来制作更平滑的数据？我一直试图通过 javsacript 做到这一点。 conrec 是最接近的，但它只适用于偶数点。
我不知道 Javascript 中的任何内容；我强烈建议为此使用 GIS 程序。

【解决方案2】：

也许你可以看看 heatmap js。

http://www.patrick-wied.at/static/heatmapjs/

虽然是基于点的，但它可能会给你一个提示。它使用画布而不是 svg。

【讨论】：

【解决方案3】：

Jason Davies 编写了一个 conrec 算法的实现，它完全可以满足您的需求：

https://github.com/jasondavies/conrec.js 它里面有一个工作示例

【讨论】：

我认为 conrec.js 是要走的路或 d3.geo.contour()，但是我如何将 (longitude, latitude, value) 或 (x,y,value) 转换成某些东西轮廓？
在示例中您可以看到您需要三个数组，分别是 x、y 和 value 值：github.com/jasondavies/conrec.js/blob/master/example/…我不知道这是不是您的问题...

【解决方案4】：

我相信出现白色条纹是因为您使用的投影；事实上，每个矩形的高度都应从赤道向南和向北进行相应调整，因为墨卡托投影会改变向南和向北的距离。
要获得固定高度的矩形，您可以尝试使用此投影：
http://bl.ocks.org/mbostock/3757119
它保留了向北和向南的维度

【讨论】：