D3.js

Question

साथ बर का उपयोग करते हुए मैं एक बर टेम्पलेट है मैं कि template.Graph में d3 से उत्पन्न एक svg ग्राफ शामिल करने के लिए टेम्पलेट के अंदर होना चाहिए

डी 3 ग्राफ़

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

अगर कोई टेम्पलेट के अंदर ग्राफ उसमें केवल एक ही होना चाहिए, तो तुम सब करने की जरूरत है <script id="datatemplate"> टैग Inst अंदर svg तत्व संलग्न करने के लिए डी 3 को बयां करती हैं शरीर का ईद

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

, तो दूसरी ओर, यदि आप एक d3 ग्राफ हर बार यह कहा जाता है उत्पन्न करने के लिए अपने टेम्पलेट चाहते हैं, मुझे नहीं लगता कि यह काम करने के उचित तरीके से है। चूंकि डी 3 डेटा को डीओएम तत्वों से जोड़ता है और हैंडलबार डेटा स्ट्रक्चर से एचटीएमएल स्ट्रिंग उत्पन्न करता है।

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

और फिर में:

आप एक बंद है जो आप अपने डेटा और तत्व आप के लिए बाध्य करने के लिए और फिर एक Handlebars सहायक से ग्राफ का एक नया उदाहरण उत्पन्न इच्छा पारित करने के लिए अंदर अपनी ग्राफ कोड लपेट सकता है अपने टेम्पलेट:

<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>