Dashboard API.resize not working with rendered javascript objects

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. I would love to know what I am doing wrong here.

  • my soy template for the d3 code
{template .Chart}
    <meta name="decorator" content="atl.general"/>
<div id="chart">
  <div class="svg" width="800" height="400">
    <h1>hello world</h1>

  • a snippet from my dashboard item renderer
self.issues = data.issues;
            if (self.issues === undefined || self.issues.length  === 0) {
            else {
                $element.empty().html(Dashboard.Item.Tutorial.Templates.IssueList({issues: self.issues}));
            $element.find(".submit").click(function (event) {
                self.render(context, preferences);

        this.API.once("afterRender", this.API.resize);