javascript - d3.js 3D数组插值

Question

代码在这里:http://jsfiddle.net/S48QX/ .

我想根据3D数据集绘制图像，例如:

var data = [
    {x:1.428, y:0.500, energy:0.458},
    {x:1.428, y:1.191, energy:0.616},
    {x:1.428, y:1.882, energy:0.795},
    {x:1.428, y:2.573, energy:0.642},
    {x:1.428, y:3.264, energy:0.536},
    {x:1.428, y:3.955, energy:0.498},
    {x:1.428, y:4.646, energy:0.494},
    {x:1.428, y:5.337, energy:0.517},
     ...

这就像散点图，但我需要设置每个像素，而不仅仅是图像上的一堆彩色点。所以，我的问题是如何使用 d3.js 插入散点。

生成的图片here是目前为止我能做的最好的，但有没有可能让它更光滑、更漂亮？

我正在寻找一种仅基于部分/分散数据生成HEATMAP 的方法。我希望 d3.js 中有一种方法可以插入缺失的部分。

(1,5) ?   ?   ?  (5,5)
  ?   ?   ?   ?    ?
  ?   ?   ?   ?    ?
(1,2) ?   ?   ?  (5,2)

Answer 1

我有一个使用 svg 过滤器的解决方案。请小心，因为这可能不是您想要的，因为此插值的数学解释会更加“模糊”。我主要是作为 svg 过滤器的练习来做的。然而 2d 插值最终得到类似的结果:例如参见三次插值(python 中的 http://docs.scipy.org/doc/scipy-0.14.0/reference/generated/scipy.interpolate.interp2d.html)

我使用圆圈(您可以尝试使用矩形)稍微重叠和半透明，并对其应用高斯模糊，从而产生“热图”外观。

var filter = svg.append("defs").append('filter')
    .attr('id', 'blur')
    .append("feGaussianBlur")
    .attr("stdDeviation", 8);

然后在圆圈上使用 .style('fill-opacity', 0.5).attr("filter", "url(#blur)")

查看 fork http://jsfiddle.net/eqt1mkov/