datastudio, как убрать холст при изменении данных? - PullRequest
Новая
       37

datastudio, как убрать холст при изменении данных?

0 голосов
/ 03 октября 2019

Я создаю эту пользовательскую визуализацию, используя 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.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);

, но это не работает, то, что я получаю, это когда я меняю данные, нажимая на фильтр, новый слой отображается какожидается, но старый слой остается застрявшим, и я не могу его переместить

enter image description here

очевидно, мне нужно что-то удалить старый SVG

Я приложил копию отчета, обратите внимание, что при фильтрации предыдущая карта не очищается

datastudio.google.com / reports / df3d5442-12d7-489e-99fe-90031a7ecc9f

спасибо Ральфу Шпандлю за помощь, после долгих раздумий я заставил его работать с 

document.body.innerHTML = "";

1 Ответ

1 голос
/ 03 октября 2019

Каждый раз, когда вы изменяете размер изображения или вносите изменения в настройки, Data Studio вызывает функцию drawViz. Это означает, что каждый раз, когда эта строка называется 

var canvasElement = document.createElement('canvas');

, что в основном создает новый тег canvas.

Вы должны сначала попытаться удалить свой тег canvas. Моя рекомендация будет 

document.getElementById("container").remove();

, а затем создайте свой холст, как вы уже делаете 

var canvasElement = document.createElement('canvas');
canvasElement.id = 'container';

Пожалуйста, не комментируйте строку, которая применяет идентификатор к вашему тегу. Если визуал создается в первый раз, тег с идентификатором «контейнер» не существует, но это не влияет на остальную часть вашего сценария.

Вы также можете взглянуть на пример Sunburst:
https://github.com/googledatastudio/experimental-visualizations/blob/master/viz/sunburst-drilldown/sunburst/sunburst.js

Функция «prepareDOM» удаляет все теги и вызывается до того, как что-либо еще будет нарисовано.

...