I have a dashboard item using d3.js to render javascript items, however the API.resize is not working and the d3 objects spill out over the dashboard item's frame. I have created a div with the space the d3 requires in my soy template which is called before resize is but this hasn't helped.
- my soy template for the d3 code
{template .Chart}<head><title>chart</title><meta name="decorator" content="atl.general"/></head><div id="chart"><div class="svg" width="800" height="400"><h1>hello world</h1></div></div>{/template}- a snippet from my dashboard item renderer
self.issues = data.issues; if (self.issues === undefined || self.issues.length === 0) { $element.empty().html(Dashboard.Item.Tutorial.Templates.Empty()); } else { $element.empty().html(Dashboard.Item.Tutorial.Templates.IssueList({issues: self.issues})); $element.append(Dashboard.Item.Tutorial.Templates.Chart()); d3chart.chart(self.issues); } self.API.resize(); $element.find(".submit").click(function (event) { event.preventDefault(); self.render(context, preferences); }); }); this.API.once("afterRender", this.API.resize);a screenshot of the dashboard item
I would love to know what I am doing wrong here.