这个问题通常发生在使用Apache Superset时使用Deck.gl的多个层级过滤器时。为了解决这个问题,你可以使用以下代码片段:
添加以下JS库:
import {Layer, COORDINATE_SYSTEM, ScatterplotLayer} from 'deck.gl';
接着,在您的render()
函数中,使用以下代码段:
{/* Add this for your filters */}
{/* Render a filter for the 'cellSize' parameter */}
this.setState({ cellSize: parseFloat(e.target.value) })} />
然后,您需要在您的constructor
函数中添加以下状态变量:
constructor(props) {
super(props);
this.state = {
data: [],
viewport: {
// ...viewport settings
},
cellSize: 100,
// ...additional state variables
}
}
接着,在您的componentDidMount()
函数中,将以下代码段添加到您的Deck.gl scatterplot layer中:
componentDidMount() {
fetch('https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/scatterplot/manhattan.json')
.then(response => response.json())
.then(data => this.setState({data}));
this.setState({myScatterplotLayer: new ScatterplotLayer({
id: 'my-scatterplot-layer',
data: this.state.data,
getPosition: d => [d[0], d[1]],
getColor: d => [255, 0, 0],
getRadius: 200,
opacity: 0.5,
cellSize: this.state.cellSize,
pickable:true,
coordinateSystem: COORDINATE_SYSTEM.LNGLAT,
updateTriggers: {
cellSize: this.state.cellSize
}
})});
window.addEventListener('resize',