2013-02-13 84 views
2

我想嵌入到车把模板的d3图形,但是当我嵌入对象注册表的帮助的句柄返回[对象SVGSVGElement]不是HTML。嵌入D3图形到车把模板

D3图表与车把注册表辅助

Handlebars.registerHelper('list', function() { 
svg = d3.select('p').append("svg").attr("width",w).attr("height",h); 
var rect1 =svg.append("rect").attr("x",0).attr("y",3*h/4). 
attr("width",w).attr("height",rect_1_h).style("fill",rect_1_color); 
return svg; 
}); 

车把模板

{{#each objects}} 
<tr> 
<td><p>{{#list}}{{/list}}</p></td> 
</tr> 
{{/each}} 
+0

请问您是怎么​​解决这个问题的? – 2016-06-06 10:20:21

回答

3

把手正在显示svg对象的toString值。

使用html()方法获取的svg的HTML表示,看到https://github.com/mbostock/d3/wiki/Selections#wiki-html

然后使用Handlebars.SafeString指示车把无法逃避的HTML,像这样:return new Handlebars.SafeString(svg.html())

但在这之前,考虑到这是在你的榜样一些问题:

  1. 您正在使用d3.select这意味着,选择ELEM来自DOM。然后你直接影响DOM中的元素。不是像“功能”那样工作,可能你想要做的是在内存中创建p元素。或者,也许你可以解决这个问题,而不需要创建一个Handlebars帮助器。

  2. 一个小问题:将var添加到svg,否则您将使用全局。