Question

I am trying to embed a d3 graph into a handlebar template but when i am embedding the object registryhelper of handlebar returns [object SVGSVGElement] not as html.

D3 graph with handlebar registry helper

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

Handlebar Template

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

Answer 1

Handlebars is displaying the toString value of the svg object.

Use the html() method to get the HTML representation of svg, see https://github.com/mbostock/d3/wiki/Selections#wiki-html

Then use Handlebars.SafeString to indicate Handlebars to not escape the HTML, something like this: return new Handlebars.SafeString(svg.html())

But before doing that, take account that are some issues in your example:

1. You are using d3.select which means, select an element from DOM. Then you are affecting that element in the DOM directly. Is not working like a “function”, probably what you want to do is to create the p element in memory. Or perhaps you can resolve the problem working with the DOM without creating a Handlebars helper.

2. A small issue: add var to svg or you’ll be using a global.