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 插入散点。

所生成的图像这里是我迄今为止做的最好，但有可能使之更加平整美观？

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

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

Answer 1

我有一种使用 svg 过滤器的解决方案。请小心，因为这可能不是您想要的，因为此插值的数学解释会更加“模糊”。我主要将其作为 svg 过滤器的练习。然而，二维插值最终得到类似的结果：例如，参见三次插值（ 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/