d3.js 3D 数组插值答案

【问题标题】：d3.js 3D array interpolationd3.js 3D 数组插值
【发布时间】：2014-08-10 09:56:29
【问题描述】：

我想根据一个 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)

【问题讨论】：

不确定您在寻找什么。对于每一行/列，您可以使用线性渐变并适当设置停止，但我认为这不适用于 2D。
是的，没错，线性渐变似乎不适用于 2D。

标签： javascript image d3.js interpolation

【解决方案1】：

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

我使用了稍微重叠和半透明的圆圈（你可以尝试使用矩形），并对其应用高斯模糊，从而得到一个看起来像“热图”的东西。

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/

【讨论】：

【解决方案2】：

通过一些努力，您也许可以将现有算法转换为 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_{版本}\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

【讨论】：

【解决方案3】：

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});

【讨论】：