Question

我正在尝试将d3图嵌入到车把模板中，但是当我嵌入对象时，车把的注册表返回[object 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

句柄显示toString对象的svg值。

使用html()方法获取svg的HTML表示形式，请参阅https://github.com/mbostock/d3/wiki/Selections#wiki-html

然后使用Handlebars.SafeString表示Handlebars不会转义HTML，如下所示：return new Handlebars.SafeString(svg.html())

但在此之前，请考虑您的示例中的一些问题：

您正在使用d3.select，这意味着，从DOM中选择一个元素。然后，您直接影响DOM中的该元素。不是像“函数”那样工作，可能你要做的就是在内存中创建p元素。或者，您可以在不创建Handlebars助手的情况下解决使用DOM的问题。
一个小问题：将var添加到svg，否则您将使用全局。

将D3图嵌入车把模板中

1 个答案: