Integrating d3.js sunburst as data studio community visualisation

问题

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

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

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.

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 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 !

回答1:

Your code has

document.body.appendChild(chartElement);

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.

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.

来源：https://stackoverflow.com/questions/56556965/integrating-d3-js-sunburst-as-data-studio-community-visualisation