时间戳

首页 > 解决方案 > 将 d3.js sunburst 集成为数据工作室社区可视化

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

问题描述

我正在尝试使用新的谷歌数据工作室社区可视化功能将旭日形图直接集成到数据工作室中。

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

我遇到的问题是旭日形图最初没有出现，但如果我在数据工作室编辑模式下移动图表区域（或者如果我在编辑窗格中重新确认指标/维度），它会出现。完成第一步（拖放）后，图表会正确显示，并且我在 Data Studio 中正确调整大小/响应良好。

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

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

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

标签： d3.jsgoogle-data-studio

解决方案

你的代码有

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

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

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

推荐阅读