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

Question

这将是我在stackoverflow上提出的第一个问题。请耐心听我说。

我正在实现一个应用程序使用Ampersand.js作为框架和可视化的D3.js。这个应用程序的当前状态是它在一个与符号页面切换器中正确地呈现了我的与符号视图(使用Jade模板)。但是，当我尝试d3.select一个我在模板中声明的div并在svg中绘制一些东西时，我没有得到任何svg添加到页面。

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

这是我的map.jade模板

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')

https://github.com/benbenolson/NetFlow-Viewer/tree/master/src/test_app是完整的源码树。问题中的模板在/ template /pages/map.jade中，视图是/client/ view /map-view.js。你必须找到那些自己，因为我不能张贴超过2个链接。

提前谢谢。

Answer 1

使用data-hook属性而不是id或class属性，我已经能够解决这个问题。因此，在模板更改中，将div(id="mapholder")替换为div(data-hook="mapholder")。此外，使用以下select语句：d3.select(this.queryByHook("#mapholder"))

总结：

模板

div(data-hook="mapholder")

代码

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