D3.js 如何将d3等高线多多边形输出绘制到画布？
我试图创建一个d3等高线图使用太阳辐射作为谷歌地图覆盖使用画布，而不是svg。我是d3新手，正在发展我的js知识，我正在努力在互联网上找到完整的例子 作为第一步，我为一个7 x 7的网格制作了一些虚拟数据，其中包含我想要在没有谷歌地图的html页面上显示的虚构值（10-40）。 我使用d3轮廓创建多多边形。我正在尝试将这些绘制到画布元素。在我的代码中，html中没有显示任何内容，但控制台中没有错误。这是我的密码D3.js 如何将d3等高线多多边形输出绘制到画布？,d3.js,canvas,D3.js,Canvas,我试图创建一个d3等高线图使用太阳辐射作为谷歌地图覆盖使用画布，而不是svg。我是d3新手，正在发展我的js知识，我正在努力在互联网上找到完整的例子 作为第一步，我为一个7 x 7的网格制作了一些虚拟数据，其中包含我想要在没有谷歌地图的html页面上显示的虚构值（10-40）。 我使用d3轮廓创建多多边形。我正在尝试将这些绘制到画布元素。在我的代码中，html中没有显示任何内容，但控制台中没有错误。这是我的密码 <!doctype html> <html> <hea
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-hsv.v0.1.min.js"></script>
<script src="https://d3js.org/d3-contour.v1.min.js"></script>
<title>Untitled Document</title>
</head>
<body>
<canvas id="canvas" width="1000" height="1000"></canvas>
<script>
values = [10,10,10,10,10,10,10,20,20,20,20,20,20,20,30,30,30,30,30,30,30, 40,40,40,40,40,40,40,30,30,30,30,30,30,30,20,20,20,20,20,20,20,10,10,10,10,10,10,10];
var n = 7,
m = 7,
canvas = document.querySelector("canvas"),
context = canvas.getContext("2d"),
path = d3.geoPath().context(context);
contours = d3.contours().size([n, m]);
projection = d3.geoIdentity().scale(canvas.width / n),
path = d3.geoPath(projection, context);
function update(data) {
context.beginPath();
path(contours
.thresholds(d3.range(0, 50, 10))(data));
context.stroke();
}
update(values);
</script>
</body>
</html>
无标题文件
数值=[10,10,10,10,10,10,20,20,20,20,20,30,30,30,30,30,30,40,40,40,40,40,30,30,30,30,30,30,30,30,30,30,20,20,20,20,20,30,30,10,10,10,10]；
var n=7，
m=7，
canvas=document.querySelector（“canvas”），
context=canvas.getContext（“2d”），
path=d3.geoPath（）.context（context）；
等高线=d3.等高线（）尺寸（[n，m]）；
投影=d3.geoIdentity（）比例（canvas.width/n），
路径=d3.地理路径（投影、上下文）；
功能更新（数据）{
context.beginPath（）；
路径（等高线）
.阈值（d3.范围（0,50,10））（数据）；
stroke（）；
}
更新（价值观）；
多边形
我定义了一些更有趣的DEM示例
d3等高线多边形
值=[10,10,10,10,10,10,10,10，
20,20,20,20,20,20,20,
30,30,30,30,30,30,30,
40,40,40,40,40,40,40,
30,30,30,30,30,30,30,
20,20,20,20,20,20,20,
10,10,10,10,10,10,10];
值=[0,0,0,0,0,0,0,0,0，
0,20,25,29,21,22, 0,
0, 0,39,32,33,10, 0,
0,10,40,50,42,40, 0,
0, 0,31,39,34,24, 0,
0,12,22,31,26,23, 0,
0, 0, 0, 0, 0, 0, 0];
var n=7，
m=7，
canvas=document.querySelector（“canvas”），
context=canvas.getContext（“2d”），
//path=d3.geoPath（）.context（context）；
等高线=d3.等高线（）尺寸（[n，m]）；
投影=d3.geoIdentity（）比例（canvas.width/n），
路径=d3.地理路径（投影、上下文）；
功能更新（数据）{
var cntrs=轮廓阈值（d3范围（0,60,10））（数据）；
cntrs.forEach（c=>{
如果（c.coordinates.length==0）返回；
context.beginPath（）；
//路径（等高线阈值（d3范围（0,60,10））（数据））；
路径（c）；
stroke（）；
});
}
更新（价值观）；