Javascript 使用Jade在Ampersand.js应用程序中呈现D3.js

这将是我在stackoverflow上问的第一个问题。请容忍我

我正在实现一个应用程序，使用Ampersand.js作为框架，使用D3.js进行可视化。该应用程序的当前状态是，它使用Jade模板在ampersand页面切换器中正确呈现我的ampersand视图。然而，当我尝试d3.1时，选择我在模板中声明的div并在svg中绘制一些东西，我没有在页面中添加svg

有趣的是，当我从Javascript控制台执行相同的代码时，它会按预期绘制

这是我的地图

section.page
  h3 Map Page
  div(class="mapholder")

这是我尝试使用的D3

d3.select ('.mapholder')
  .append ("svg")
  .attr ("width", 400)
  .attr ("height", 400)
  .append ("circle")
  .style ("stroke", "gray")
  .style ("fill", "white")
  .attr ("r", 10)
  .attr ("cx", 300)
  .attr ("cy", 200);

我试过把div改成

div(id="mapholder")

D3到

d3.select ('#mapholder')

是完整的源代码树。问题中的模板位于/templates/pages/map.jade中，视图为/client/view/map-view.js。你必须自己找到，因为我不能发布超过2个链接

提前感谢。

使用数据挂钩属性而不是id或class属性，我已经能够解决这个问题。因此，在模板更改中，将divid=mapholder替换为divdata hook=mapholder。此外，使用以下select语句：d3.selectthis.QueryHookMapholder

总结：

模板

代码

---

我有同样的问题，使用车把模板。你已经找到解决办法了吗？那太好了。

div(data-hook="mapholder")

d3.select(this.queryByHook("#mapholder"))`