javascript - 使用 Jade 在 Ampersand.js 应用程序中渲染 D3.js

Question

这将是我在 stackoverflow 上问的第一个问题。请耐心等待。

我正在使用 Ampersand.js 作为框架和 D3.js 来实现一个应用程序用于可视化。该应用程序的当前状态是它在＆符号页面切换器中正确呈现我的＆符号 View (使用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是完整的源代码树。问题中的模板位于/templates/pages/map.jade 中， View 位于/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"))`