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 元素。或者，也许您可​​以在不创建 Handlebars 助手的情况下解决使用 DOM 的问题。

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