Javascript 在动态添加的div中绘制D3.js图

我有一个（可能很奇怪）的设置，我在页面的某个部分中使用ajax'ing一个模板，然后尝试在该模板的一个元素中绘制一个包含D3.js的图表

奇怪的是，有时它会呈现，而另一些则不会，抱怨我发现一定是元素保存了当时没有呈现的图表，因为它来自一个ajax调用

我怎样才能克服这个问题？我一直在读jQuery的

when（）

和

then（）

但是我似乎不知道它对我的情况有什么帮助（如果有的话）

这是我的代码的（更简单）版本：

$.get("/url/to/my/template", function(templateData){
    // this element is already in the page
    $("#elementInThePage").html(templateData);
    // this function draws the D3 chart
    buildChart();
});

function buildChart(){
    // this element comes in the template
    // sometimes it's already available, other times it isn't
    // and obviously d3 complains about it not being there
    var element = d3.select("#elementInTemplate");
    // do more stuff (...)
}

总之，如何确保仅在呈现

#elementInTemplate

时调用

buildChart（）

编辑：我已经尝试将

.done（）

链接到我的

$。获取
，但发生了完全相同的情况

EDIT2:我想我把问题解释错了。D3.js不会抱怨它不在那里。实际上，它是根据模板中元素的大小（WxH）有条件地绘制图表的，因为该元素仍然没有呈现，所以它会破坏图表

EDIT3:另一个（我认为是相关的），注意：在
buildChart（）中，D3.js取决于模板元素的维度。所以，如果我

console.log($("#elementInTemplate").width()+" x "+$("#elementInTemplate").height());

如果失败，我会得到
234 x 0
。如果它有效，我会得到
234 x 456
，所以这一行：$（“#elementInThePage”）.html（templateData）；，渲染元素INTemplate？一旦你运行了这一行，你想只在buildChart（）运行完毕时调用它吗？@thisonegay是的，就是这样。我相信这将帮助我解决这个问题。虽然我不想设置超时时间之类的东西，但我很想知道是否有更好的解决方案。我认为这些应该有帮助you@thisOneGuy因为我不希望它只在有宽度和高度的情况下工作。我希望它始终具有宽度和高度，以便正常工作。如果可以使用新尺寸更新宽度和高度，请使用可变宽度和高度并覆盖它们，如果不使用旧的宽度和高度（或默认值），则在D3中使用这些值，因此此行：$（“#elementInThePage”）.html（templateData）；，渲染元素INTemplate？一旦你运行了这一行，你想只在buildChart（）运行完毕时调用它吗？@thisonegay是的，就是这样。我相信这将帮助我解决这个问题。虽然我不想设置超时时间之类的东西，但我很想知道是否有更好的解决方案。我认为这些应该有帮助you@thisOneGuy因为我不希望它只在有宽度和高度的情况下工作。我希望它始终具有宽度和高度，以便工作。如果可以使用新尺寸更新宽度和高度，则使用可变宽度和高度并覆盖它们，如果不使用旧的宽度和高度（或默认值），则在D3中使用这些值