我想使用d3.contour在画布上绘制多个轮廓。我的数据由200 000点组成。在这里,您可以看到显示内容: http://zupimages.net/viewer.php?id=19/27/flkz.png
当我放大时,它太慢了,因为我必须再次绘制路径。是否可以缩放而不重绘这些轮廓?
这是我的带有缩放功能和绘制命令的代码:context.beginPath();
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script>
function update(data) {
var cntrs = contours.thresholds(d3.range(dataCfg.min, dataCfg.max, dataCfg.step))(data);
context.save();
context.clearRect(0, 0, width, height);
context.translate(transform.x, transform.y);
context.scale(transform.k, transform.k);
cntrs.forEach(c => {
if(!c.coordinates.length) return;
context.beginPath();
path(c);
context.fillStyle = colorScale(c.value);
context.fill();
});
context.restore();
}
function getConf() {
fetch('conf.json')
.then(res => res.json())
.then(data => {
console.log('getConf > OK');
width = data.latlon.nblon;
height = data.latlon.nblat;
canvas.attr('width', width);
canvas.attr('height', height);
contours = d3.contours().size([width, height]);
projection = d3.geoIdentity().scale(canvas.property('width') / width);
path = d3.geoPath(projection, context);
getData('t2m');
})
.catch(err => console.log(err));
}
function getData(type) {
fetch(type + '.json')
.then(res => res.json())
.then(data => {
console.log('getData %o > OK', type);
update(data);
})
.catch(err => console.log(err));
}
function zoomed() {
transform = d3.event.transform;
getData('t2m');
}
canvas.call(d3.zoom()
.scaleExtent([1, 8])
.on("zoom", zoomed));
(function() {
getConf();
})();
</script>
使用svg,我没有问题,因为我没有被迫重画路径。
感谢您的帮助!