嵌入D3圖形到車把模板

Question

我想嵌入到車把模板的d3圖形，但是當我嵌入對象註冊表的幫助的句柄返回[對象SVGSVGElement]不是HTML。

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}} 

Answer 1

把手正在顯示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，否則您將使用全局。