时间戳

首页 > 解决方案 > deck.gl 过渡和过滤

d3.js - deck.gl 过渡和过滤

问题描述

谁能解释与 d3js 相比，Deck.gl 的数据更新和转换如何工作？例如在这段代码中：

var updateLayers = function(dataset) {
var scatterplot = new deck.ScatterplotLayer({
    /* unique id of this layer */
    id: 'checkins',
    /* data: an array of objects */
    data: dataset,
    /* data accessors */
    getPosition: d => d.geometry.coordinates, // returns longitude, latitude, [altitude]
    getRadius: d => circleSize(d.properties.reviews), // returns radius in meters
    getColor: d => [255, 0, 0],
    outline: true, // returns R, G, B, [A] in 0-255 range
    transitions: {
        getRadius: {
            duration: 1000,
            easing: d3.easeCubicInOut,
            enter: value => [value[0], value[1], value[2], 1] // fade in
        }
    }
})

// Add the layer to deckgl:
deckgl.setProps({ layers: [scatterplot] });
}

我不清楚在enter: value => [value[0], value[1], value[2], 1]做什么。谁能解释一下？我通常希望（根据 d3js）这enter:是在转换中设置断点，但我不清楚value指的是什么？

标签： d3.jsdeck.gl

解决方案

https://github.com/uber/deck.gl/blob/master/docs/api-reference/layer.md

enter - Function - APPEARANCE (value => value) - 回调以获取输入顶点正在转换的值。

enter 应该返回要转换的值。对于当前顶点。

它接收两个参数：

toValue (TypedArray) - 当前顶点要转换到的新值

fromChunk (Array | TypedArray) - 对于当前顶点所属的块，要转换的现有值。“块”是一组顶点，可帮助回调确定此转换的上下文。对于大多数层，所有对象都在一个块中。对于 PathLayer 和 PolygonLayer，每个路径/多边形都是一个块。

推荐阅读