Javascript d3：不规则/分散数据的等高线或曲面图

我可以使用一组三元组[X，Y，Z]，并使用Python和matplotlib通过单个调用立即生成一个（平滑的）等高线图。也可以使用“轻松”生成轮廓，但我发现速度慢得令人无法接受。（另外，我对类似于Python的

我正在使用d3.js寻找类似的功能。我会选择“曲面图”而不是等高线，或者选择没有等高线的“热图”

我可以看到如何生成a和/或a，但问题似乎仍然是一个开放的问题（尽管这个问题已经提前结束了！）

到目前为止，我所看到的都是“手工”的方法，使用或使用网格插值

我甚至愿意在Delaunay三角剖分中使用Gouraud着色或Coon渐变，但显然……不确定这会给我留下d3&（常规）SVG。这似乎是一个巨大的痛苦

是否有一种“更好”的打包方式，即不需要太多“自定义”代码的东西？（可能是通过我还没有找到的多维贝塞尔例程实现的？）

我将发布我的出发点：一个彩色的Voronoi tesselation:。你能帮我把这个从“块状”改为“平滑”（甚至可以显示轮廓线）吗

var svg=d3。选择（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”）；
var npoints=1000；
var站点=d3.范围（npoints）
.map（函数（d）{返回[Math.random（）*宽度，Math.random（）*高度]；}）；
//正在映射的数据点/颜色处的值=“zvals”
var kx=3.14159/（宽度*0.5）；
var ky=3.14159/（高度*0.5）；
var zvals=d3.范围（npoints）
对于（i=0；i

更新：在blocks.org上也找到了这篇文章，正如我提到的，这是我愿意接受的结果，但这也是大量的自定义代码。我更喜欢紧凑的“库存”解决方案，即la tricontour（）

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