Question

我可以使用一组三元组[X，Y，Z]并使用Python和matplotlib立即生成（平滑）轮廓图，并使用单次调用到tricontour()。人们也可以轻松地生成轮廓。使用plot.ly，但我觉得它慢得令人无法接受。（另外，我对MATLAB solution不感兴趣，这与Python类似）

我正在寻找使用d3.js的类似功能。我愿意接受一个＆＃34;表面情节＆＃34;而不是轮廓，或热图＆＃34;没有轮廓线。

我可以看到如何生成colored Delaunay triangulation和/或colored Voronoi Tesselation，但how to generate a contour plot in d3 from irregular data points的问题似乎仍然是一个开放的问题（即使问题是过早的）关闭！）。

到目前为止，我所见过的只是方法＆＃34;手工＆＃34;，使用Radial basis functions (gaussian blur)或使用Barycentric interpolation进行网格插值。

我甚至愿意和'生活在一起。对Delaunay三角剖分的Gouraud阴影或Coon渐变，但显然"advanced shading methods" like Gourand or Coon gradients are not in "regular" SVG but are proposed for SVG2 ...不确定d3＆amp; （常规）SVG。好像doing this SVG gradient-shading by hand似乎是一个重大的痛苦。

是否有更好的＆＃34;以这种方式实现这一目标，即不需要那么多“定制”的东西。代码？（也许是通过一些多维的Bezier例程我还没找到？）

我会用我的起点发布一个小提琴：一个彩色的Voronoi tesselation：https://jsfiddle.net/k2v2jy7s/1/。你可以帮我从＃34; blocky＆＃34;到＆＃34;顺利＆＃34; （甚至可能显示等高线）？

<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
    var svg = d3.select("svg"),
        width = +svg.attr("width"),
        height = +svg.attr("height");

    var npoints = 1000;
    var sites = d3.range(npoints)
        .map(function(d) { return [Math.random() * width, Math.random() * height]; });


    // values  at data points / colors being mapped = "zvals"
    var kx = 3.14159/(width*0.5);
    var ky = 3.14159/(height*0.5);
    var zvals = d3.range(npoints)
    for (i = 0; i < npoints; i++) { 
        zvals[i] = (1.0 + Math.cos(kx*sites[i][0]) * Math.cos(ky*sites[i][1]))/2.0;
        zvals[i] *= zvals[i];
    }

    var g = svg.append("g")
        .attr("transform", "translate(" + 0+ "," + 0 + ")");

    var voronoi = d3.voronoi()
        .extent([[-1, -1], [width + 1, height + 1]]);

    var polygon = svg.append("g")
        .attr("class", "polygons")
        .selectAll("path")
        .data(voronoi.polygons(sites))
        .enter().append("path")
        .style('fill', function(d,i){ return d3.hsl( zvals[i]*310,        1, .5); })
        .call(redrawPolygon);

    function redrawPolygon(polygon) {
      polygon
          .attr("d", function(d) { return d ? "M" + d.join("L") + "Z" : null; });
    }
</script>

更新：在"Gradient Heatmaps"上也发现了这个blocks.org帖子，正如我所提到的那样，我愿意和他一起生活，但是＃＆＃ 39;大量的自定义代码。真的更喜欢紧凑的股票＆＃39;解决方案，la tricontour（）。

d3：来自不规则/散乱数据的轮廓或曲面图

0 个答案: