Question

我正在尝试使用新的Google数据工作室community vizualisation功能将森伯斯特图直接集成到数据工作室中。

该图基于this d3.js代码。包含我的源文件的存储桶位于here

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

我尝试通过控制台（日志）对javascript中的不同对象进行故障排除，而不是对sunburst的本地执行进行了故障排除（仅适用于html / css / js，而不是在datastudio上）。似乎在Data Studio版本中，第一次加载时正确定义了“ json”对象，但是添加到DOM的“ path”不起作用（请参见代码中的var path = vis.data .....）< / p>

在上面的存储桶链接中单击以访问所有代码。可视化js代码位于MyViz.js文件的末尾（最小化d3.js加载后）。如果您想在datastudio中尝试一下，这是我的dataset（又快又脏）

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

Answer 1

您的代码具有

document.body.appendChild(chartElement);

在drawViz()函数的末尾被调用，但是您在drawViz()中的d3.js代码假定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);

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

注意：有关如何使用d3.js社区可视化管理svg渲染/重绘的示例，请查看GitHub上的Sankey可视化代码。

将d3.js sunburst集成为数据工作室社区可视化

1 个答案: