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是完整的源代码树。问题中的模板位于/templates/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"))`

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

1 个答案: