d3.js 三维数组插值

Question

这里有代码：http://jsfiddle.net/S48QX/。

我想根据一个三维数据集来绘制一张图片，例如：

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)

- user3757330

---

不确定您正在寻找什么。对于每一行/列，您可以使用线性渐变并适当设置停止位置，但我认为这在二维中不起作用。 - Lars Kotthoff

是的，确切地说，在二维中似乎线性渐变不起作用。 - user3757330

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)")

查看分支http://jsfiddle.net/eqt1mkov/

- Fabian Dubois

Answer 2

Plotly.js基于D3.js，能够为散点数据创建等高线图：

https://jsfiddle.net/vwksaob3/

var data = [ {      
  x: [0, 1, 1, 0],
  y: [0, 0, 1, 1],
  z: [0, 0, 1, 1],
  type: 'contour',  
  colorscale: 'Jet',
  showscale: false,
  autocontour: true  
}];

var layout = {
margin: {
b: 0,
l: 0,
r: 0,
t: 0
},
height: 600,
width: 600,
  title: '',
  xaxis: {
        ticks: '',
      showticklabels: false  

  },
  yaxis: {
       ticks: '',
       showticklabels: false     
  } 
};

Plotly.newPlot('graph', data, layout, {displayModeBar: false});

- Stefan

Answer 3

通过一些努力，您可能能够将现有的算法翻译成JavaScript。

• Octave是开源的，并提供了一种散乱数据插值的方法：

http://www.dm.unibo.it/~achilles/calc/octave.html/Interpolation-on-Scattered-Data.html

Octave的源代码可在以下网址获取：

ftp://ftp.gnu.org/gnu/octave/

文件griddata.m和一些引用的文件可以在文件夹octave_{version}\scripts\geometry中找到。

• D3.js似乎提供了一些Voronoi和Delaunay功能，可能会有所帮助：

https://github.com/d3/d3/wiki/Voronoi-Geom

http://bl.ocks.org/mbostock/4341156

• Python也提供了一个griddata方法：

http://docs.scipy.org/doc/scipy-0.14.0/reference/generated/scipy.interpolate.griddata.html#scipy.interpolate.griddata

- Stefan