我可以使用Python和matplotlib的tricontour()函数一次性生成一组三元组[X,Y,Z]的平滑轮廓图。也可以使用plot.ly轻松生成轮廓线，但我发现它速度太慢了，无法接受。(此外，我不感兴趣MATLAB解决方案，因为它与Python类似)。
我正在寻找使用d3.js实现类似功能的方法。如果没有轮廓线，我可以接受“表面图”或“热力图”。
我可以看到如何生成彩色德劳内三角剖分和/或彩色沃罗诺伊图, 但是如何从不规则数据点在d3中生成等高线图的问题似乎仍然是一个开放性问题（尽管这个问题过早地被关闭了！）。到目前为止，我所看到的都是“手动”方法，使用径向基函数（高斯模糊）或使用重心插值进行网格插值。
我甚至愿意在Delaunay三角剖分上使用Gouraud着色或Coon渐变，但显然像Gourand或Coon渐变这样的"高级着色方法"并不在“常规”SVG中，但被提议用于SVG2...不确定这让我在d3和（常规）SVG方面处于什么位置。手动实现SVG渐变着色似乎会非常麻烦。
是否有一种“更好”的打包方式来完成这个，即不需要太多“自定义”代码的东西？（也许通过一些我还没有找到的多维Bezier例程？）
我会发布一个起点为彩色 Voronoi 图案的 Fiddle：https://jsfiddle.net/k2v2jy7s/1/。你能帮我将其从“方块状”变得更加“平滑”（甚至显示轮廓线）吗？
我可以看到如何生成彩色德劳内三角剖分和/或彩色沃罗诺伊图, 但是如何从不规则数据点在d3中生成等高线图的问题似乎仍然是一个开放性问题（尽管这个问题过早地被关闭了！）。到目前为止，我所看到的都是“手动”方法，使用径向基函数（高斯模糊）或使用重心插值进行网格插值。
我甚至愿意在Delaunay三角剖分上使用Gouraud着色或Coon渐变，但显然像Gourand或Coon渐变这样的"高级着色方法"并不在“常规”SVG中，但被提议用于SVG2...不确定这让我在d3和（常规）SVG方面处于什么位置。手动实现SVG渐变着色似乎会非常麻烦。
是否有一种“更好”的打包方式来完成这个，即不需要太多“自定义”代码的东西？（也许通过一些我还没有找到的多维Bezier例程？）
我会发布一个起点为彩色 Voronoi 图案的 Fiddle：https://jsfiddle.net/k2v2jy7s/1/。你能帮我将其从“方块状”变得更加“平滑”（甚至显示轮廓线）吗？
<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>
