javascript - 将 D3 图表嵌入到 Handlebars 模板中

Question

我正在尝试将 d3 图形嵌入到 Handlebars 模板中，但是当我嵌入 Handlebars 的对象registryhelper 时，返回 [object SVGSVGElement] 而不是 html。

带有 Handlebars 注册表助手的 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;
 });

Handlebars 模板

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

Answer 1

Handlebars 正在显示 svg 对象的 toString 值。

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

然后使用Handlebars.SafeString指示Handlebars不要转义HTML，如下所示:return new Handlebars.SafeString(svg.html())

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

1. 您正在使用d3.select，这意味着从 DOM 中选择一个元素。然后您就可以直接影响 DOM 中的该元素。不像“函数”那样工作，可能您想要做的是在内存中创建 p 元素。或者，也许您可​​以解决使用 DOM 的问题，而无需创建 Handlebars 助手。

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