将d3.js sunburst集成为Data Studio社区可视化 [英] Integrating d3.js sunburst as data studio community visualisation

问题描述

我正在尝试使用新的Google数据工作室社区虚拟化功能进行集成直接在Data Studio中创建森伯斯特图.

I'm trying to use the new google data studio community vizualisation feature to integrate a sunburst diagram directly in data studio.

该图基于此 d3.js代码. 带有我的源文件的存储桶位于此处

The diagram is based on this d3.js code. The bucket with my source files is located here

我遇到的问题是，首先不显示森伯斯特图，但是如果我在Data Studio编辑模式下移动图表区域(或者如果我在编辑窗格中重新确认指标/维度)，它就会出现.第一步(拖放)完成后，图表会正确显示，并且我在Data Studio中正确调整了大小/反应良好.

The problem I'm having is that the sunburst diagram doesn't appear at first but it does if I move the chart zone in data studio edit mode (or if I re-confirm a metric / dimension in the edit pane). Once a first move (drag & drop) is done, the chart correctly displays and I correctly resizes / responds well in data studio.

我尝试通过控制台(日志)对javascript中的不同对象进行故障排除，而不是对sunburst的本地执行进行了故障排除(仅适用于html/css/js，而不是在datastudio上).看来，在数据工作室版本中，"json"对象是在首次加载时正确定义的，但是添加到DOM的路径"不起作用(请参见代码中的var path = vis.data .....)

I've tried troublshooting by console(logs) the different objects in the javascript vs a local execution of the sunburst (html / css / js only, not on datastudio). It appears that in the data studio version, the "json" object is correctly defined at first load but the "path" adds to the DOM do not work (see var path = vis.data..... in the code)

上面的存储桶链接上的Clic可访问所有代码.可视化js代码位于MyViz.js文件的末尾(最小化d3.js加载之后). 如果您想在datastudio中尝试一下，请使用我的数据集(快又脏)

Clic on bucket link above to access all code. The visualisation js code is at the end of the MyViz.js file (after minified d3.js load). If you want to try yourself in datastudio here's my dataset (quick and dirty)

任何帮助都会受到热烈欢迎！

Any help would be warmly welcomed !

推荐答案

您的代码具有

document.body.appendChild(chartElement);

，但是drawViz()中的d3.js代码假定chartElement已经是活动DOM的一部分.

called at the end of the drawViz() function, but your d3.js code within drawViz() assumes that chartElement is already part of the active DOM.

如果在设置高度/宽度属性的位置下将其右移，

If you move it up to right under where you set the height/width attributes,

  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);

我能够让您的代码在页面加载时呈现.

I'm able to get your code to render on page load.

注意:有关如何使用d3.js社区可视化管理svg渲染/重绘的示例，请查看

Note: for an example of how to manage svg rendering/redraw with a d3.js community visualization, take a look at the Sankey visualization code on GitHub.

这篇关于将d3.js sunburst集成为Data Studio社区可视化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！