2

ハンドルバー テンプレートに d3 グラフを埋め込もうとしていますが、ハンドルバーのオブジェクト レジストリヘルパーを埋め込むと、HTML としてではなく [オブジェクト SVGSVGElement] が返されます。

ハンドルバー レジストリ ヘルパーを使用した 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}}
4

1 に答える 1

3

ハンドルバーはオブジェクトのtoString値を表示していsvgます。

メソッドを使用してhtml()の HTML 表現を取得します。https://github.com/mbostock/d3/wiki/Selections#wiki-htmlsvgを参照してください。

次にHandlebars.SafeString、次のように、HTML をエスケープしないようにハンドルバーを示すために使用します。return new Handlebars.SafeString(svg.html())

ただし、それを行う前に、例のいくつかの問題を考慮してください。

  1. どちらの手段を使用しd3.selectているか、DOM から要素を選択します。次に、DOM 内のその要素に直接影響を与えています。「関数」のように機能していません。おそらくやりたいことはp、メモリ内に要素を作成することです。あるいは、Handlebars ヘルパーを作成せずに DOM を操作することで問題を解決できるかもしれません。

  2. 小さな問題: varsvg に追加しないと、グローバルを使用することになります。

于 2013-02-13T13:40:26.510 に答える