Question

我想基于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过滤器的解决方案。要小心，因为这可能不是你想要的，因为这种插值的数学解释会更加模糊＆＃39;我主要是在svg过滤器上练习它。然而，2d插值最终得到类似的结果：例如，参见三次插值（python中的http://docs.scipy.org/doc/scipy-0.14.0/reference/generated/scipy.interpolate.interp2d.html）

我使用圆圈（您可以尝试使用矩形）略微重叠和半透明并应用于高斯模糊，从而产生一个热图＆＃39;看东西。

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/

Answer 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_ {版本} \脚本\几何

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

Answer 3

Plotly.js基于D3.js并能够为分散的数据创建等高线图：

https://jsfiddle.net/vwksaob3/

memory.write("\tIndent Me Somewhere Onto The Next Line\n")

d3.js三维数组插值

3 个答案: