如何在画布上使用d3js进行缩放/平移而不重绘

时间:2019-07-04 13:43:27

标签: javascript d3.js

我想使用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,我没有问题,因为我没有被迫重画路径。

感谢您的帮助!

0 个答案:

没有答案