Javascript datastudio,数据更改时如何删除画布?
我使用deckgl构建了这个定制的视觉效果,在经历了很多困难之后,我不是一个javascript开发人员,所以我真的不知道我在做什么,下面是代码Javascript datastudio,数据更改时如何删除画布?,javascript,canvas,google-data-studio,deck.js,Javascript,Canvas,Google Data Studio,Deck.js,我使用deckgl构建了这个定制的视觉效果,在经历了很多困难之后,我不是一个javascript开发人员,所以我真的不知道我在做什么,下面是代码 const dscc = require('@google/dscc'); const viz = require('@google/dscc-scripts/viz/initialViz.js'); const local = require('./localMessage.js'); const {Deck} = require ('@deck.g
const dscc = require('@google/dscc');
const viz = require('@google/dscc-scripts/viz/initialViz.js');
const local = require('./localMessage.js');
const {Deck} = require ('@deck.gl/core');
const {ScatterplotLayer} = require('@deck.gl/layers');
//const {Deck, ScatterplotLayer} = deck;
//import {ScatterplotLayer} from '@deck.gl/layers';
// change this to 'true' for local development
// change this to 'false' before deploying
export const LOCAL = false;
// create and add the canvas
var canvasElement = document.createElement('canvas');
// var ctx = canvasElement.getContext('2d');
// canvasElement.id = 'container';
// //document.body.appendChild(canvasElement);
const drawViz = (data) => {
var height = dscc.getHeight();
var width = dscc.getWidth();
// clear the canvas
var ctx = canvasElement.getContext('2d');
// clear the canvas.
ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);
// set the canvas width and height
ctx.canvas.width = dscc.getWidth();
ctx.canvas.height = dscc.getHeight();
// code
var data1 = data.tables.DEFAULT;
var data2 = JSON.stringify(data1);
var data3 = data2.replace(/\"]/g, "]");
var data4 = data3.replace(/\["/g, "[");
var data4 = JSON.parse(data4);
console.log(data4);
const INITIAL_VIEW_STATE = {
bearing: 0,
longitude: 143.499772,
latitude: -34.7773053,
zoom: 15,
minZoom: 5,
maxZoom: 20,
pitch: 40.5,
};
new Deck({
initialViewState: INITIAL_VIEW_STATE,
controller: true,
layers: [
new ScatterplotLayer({
data : data4,
getPosition: d => d.coordinateid,
getRadius: d => d.sizeid,
getFillColor: d => d.colorid,
})
],
});
};
// renders locally
if (LOCAL) {
drawViz(local.message);
} else {
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});
}
根据文档,该行应清除画布
ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);
但这不起作用,我得到的结果是,当我通过单击过滤器来更改数据时,新层会按预期渲染,但旧层会卡住,我无法移动它
显然,我需要一些东西来删除旧的SVG
我附上了一份报告的副本,注意当你过滤之前的地图时是不清除的
谢谢拉尔夫·斯潘德尔的帮助,经过一番周折,我终于成功了
document.body.innerHTML = "";
每次调整visual Studio的大小或更改设置时,Data Studio都会调用drawViz函数。这意味着每次调用此行时
var canvasElement = document.createElement('canvas');
这基本上创建了一个新的画布标记
必须首先尝试删除画布标记。我的建议是
document.getElementById("container").remove();
然后像你已经做的那样创建你的画布
var canvasElement = document.createElement('canvas');
canvasElement.id = 'container';
请不要忘记我取消了将ID应用于标记的行的注释。
如果是第一次创建可视化,则带有id容器的标记不存在,但这对脚本的其余部分没有影响
您还可以查看Sunburst示例:
函数prepareDOM删除所有标记,并在绘制任何其他标记之前调用