Sử dụng tay lái với D3.js

Question

Tôi có một mẫu tay lái tôi muốn bao gồm một đồ thị svg tạo ra từ d3 vào template.Graph rằng nên bên trong mẫu

D3 Graph

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> 

tay lái mẫu

<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

Nếu chỉ có một thể hiện của biểu đồ bên trong mẫu, thì tất cả những gì bạn cần làm là yêu cầu d3 thêm phần tử svg vào trong thẻ <script id="datatemplate"> ead của cơ thể.

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

Nếu, bạn muốn mẫu của mình tạo biểu đồ d3 mỗi khi được gọi, tôi không nghĩ đây là cách làm đúng. Vì d3 liên kết dữ liệu với các phần tử DOM và Handlebars tạo ra các chuỗi HTML từ các cấu trúc dữ liệu.

Bạn có thể gói mã đồ thị của bạn bên trong một kết thúc mà bạn truyền dữ liệu và các yếu tố của bạn, bạn muốn liên kết với và sau đó tạo ra một thể hiện mới của đồ thị từ một helper tay lái:

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

Và sau đó trong mẫu của bạn:

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