使用車把D3.js

Question

我有一個車把模板我想包括從D3的生成成template.Graph一個SVG圖形應該是在模板中

D3圖

var dataset = [1200,3000,3200]; 
// dataset will change dynamically. 

<script type="text/javascript"> 

    var w = 154; 
    var h = 42; 
    var rect_1_h = 5; 
    var rect_2_h = rect_1_h * 2; 
    var rect_2_w = rect_1_h/2; 
    var rect_1_color = "#A1C9D9"; 
    var rect_2_color = "#999999"; 
    var text_color = "#555555"; 
    var font_size = 18; 
    var font_family = "Segoe UI" 

    var dataset = [1200,3000,3200]; 

    /*------controller----*/ 

    var xScale = d3.scale.linear().domain([dataset[0],dataset[2]]) 
    .range([0,w]); 

    var svg = d3.select("body").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); 
    var rect2 = svg.append("rect").attr("x",xScale(dataset[1])).attr("y",3*h/4-rect_1_h/2).attr("width",rect_2_w) 
    .attr("height",rect_2_h).style("fill",rect_2_color); 

    //var texts = svg.selectAll("text").data(dataset).enter().append("text").text(function(d){ return d; }).attr("fill","red").attr("x",function(d,i){ return i*50 }).attr("y",30) 

    var text1 = svg.append("text").attr("x",2).attr("y",h/3+2).text(dataset[0]).style("fill",text_color) 
    .attr("font-size",font_size).attr("font-family",font_family); 
    var text2 = svg.append("text").attr("x",w-42).attr("y",h/3+2).text(dataset[2]).style("fill",text_color) 
    .attr("font-size",font_size).attr("font-family",font_family); 
</script> 

車把模板

<script id="datatemplate" type="text/x-handlebars-template"> 
     {{#each objects}} 
     <tr> 
     <td>{{lp}}<span class="text1">{{lp2}}</span></td> 
     <td>{{dc}}<span class="text1">{{dc2}}</span></td> 
     <td>{{lp}}<span class="text1">{{lp2}}</span></td> 
     </tr> 
     {{/each}} 
</script> 

Answer 1

如果有應該在模板中的圖形只有一個實例，那麼所有你需要做的是告訴D3的SVG元素追加<script id="datatemplate">標籤裏面研究所身體的頭。

var svg = d3.select("#datatemplate").append("svg").attr("width",w).attr("height",h); 

如果，另一方面，你想你的模板來生成D3圖中的每個調用時，我不認爲這是做事的正確方法。由於d3將數據綁定到DOM元素，Handlebars從數據結構生成HTML字符串。

你可以換到你通過你希望綁定，然後生成圖表的從車把幫手新實例，您的數據和元素的閉包你的圖形代碼：

function graphic(dataset, element) { 
    var w = 154; 
    var h = 42; 
    var rect_1_h = 5; 
    var rect_2_h = rect_1_h * 2; 
    var rect_2_w = rect_1_h/2; 
    var rect_1_color = "#A1C9D9"; 
    var rect_2_color = "#999999"; 
    var text_color = "#555555"; 
    var font_size = 18; 
    var font_family = "Segoe UI"; 

    /*------controller----*/ 

    var xScale = d3.scale.linear().domain([dataset[0],dataset[2]]) 
     .range([0,w]); 

    var svg = d3.select(element).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); 
    var rect2 = svg.append("rect").attr("x",xScale(dataset[1])).attr("y",3*h/4-rect_1_h/2).attr("width",rect_2_w) 
     .attr("height",rect_2_h).style("fill",rect_2_color); 

    //var texts = svg.selectAll("text").data(dataset).enter().append("text").text(function(d){ return d; }).attr("fill","red").attr("x",function(d,i){ return i*50 }).attr("y",30) 

    var text1 = svg.append("text").attr("x",2).attr("y",h/3+2).text(dataset[0]).style("fill",text_color) 
     .attr("font-size",font_size).attr("font-family",font_family); 
    var text2 = svg.append("text").attr("x",w-42).attr("y",h/3+2).text(dataset[2]).style("fill",text_color) 
     .attr("font-size",font_size).attr("font-family",font_family); 

    return svg; 
}; 

Handlebars.registerHelper('graphics', function(dataset, id) { 
    graphic(dataset, '#' + id); 
}); 

然後在模板：

<script id="datatemplate" type="text/x-handlebars-template"> 
    {{#each objects}} 
    <tr> 
    <td>{{lp}}<span class="text1">{{lp2}}</span></td> 
    <td>{{dc}}<span class="text1">{{dc2}}</span></td> 
    <td>{{lp}}<span class="text1">{{lp2}}</span></td> 
    </tr> 
    {{/each}} 
    <div id={{ id }}></div> 
    {{graphics dataset id}} 
</script>