Интеграция d3.js Sunburst как визуализация сообщества студии данных - PullRequest
Новая
       19

Интеграция d3.js Sunburst как визуализация сообщества студии данных

0 голосов
/ 12 июня 2019

Я пытаюсь использовать новую функцию google data studio визуализация сообщества для интеграции диаграммы солнечных лучей непосредственно в data studio.

Диаграмма основана на this код d3.jsКорзина с моими исходными файлами находится здесь

Проблема, с которой я столкнулся, заключается в том, что диаграмма солнечных лучей сначала не появляется, а появляется, если я перемещаю зону диаграммы в студии данныхрежим редактирования (или если я повторно подтверждаю метрику / измерение на панели редактирования).Как только первый шаг (перетаскивание) сделан, диаграмма правильно отображается, и я правильно изменяю размеры / хорошо реагирую в студии данных.

Я пытался отстреливать консоль (логи) различных объектов в javascript vsлокальное выполнение солнечных лучей (только в формате html / css / js, а не в datastudio).Похоже, что в версии студии данных объект "json" правильно определен при первой загрузке, но добавление "пути" в DOM не работает (см. Var path = vis.data ..... в коде)

Нажмите на ссылку выше, чтобы получить доступ ко всему коду.Код js визуализации находится в конце файла MyViz.js (после минифицированной загрузки d3.js).Если вы хотите попробовать себя в datastudio, вот мой набор данных (быстрый и грязный)

Любая помощь будет тепло приветствоваться!

1 Ответ

0 голосов
/ 12 июня 2019

Ваш код имеет

document.body.appendChild(chartElement);

вызывается в конце функции drawViz(), но ваш код d3.js в drawViz() предполагает, что chartElement уже является частью активной DOM.

Если вы переместите его вправо, под которым вы устанавливаете атрибуты высоты / ширины, 

  var chartElement = document.createElement('div');
  chartElement.id = 'chart';
  chartElement.setAttribute("height", `${height}px`); // REMOVE
  chartElement.setAttribute("width", `${width}px`); // REMOVE
  // NOTE: I moved this line of code up
  document.body.appendChild(chartElement);

Я могу получить ваш код для рендеринга при загрузке страницы.

Примечание: для примера того, как управлять рендерингом / перерисовкой svg с помощью визуализации сообщества d3.js, взгляните на код визуализации Sankey на GitHub.

...