6

d3 から生成された 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>
4

1 に答える 1

5

テンプレート内にグラフのインスタンスが 1 つしかない場合は<script id="datatemplate">、本文ではなくタグ内に svg 要素を追加するように d3 に指示するだけです。

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

一方、テンプレートが呼び出されるたびに d3 グラフを生成するようにしたい場合、これは適切な方法ではないと思います。d3 はデータを DOM 要素にバインドし、Handlebars はデータ構造から HTML 文字列を生成するためです。

バインドするデータと要素を渡すクロージャー内にグラフ コードをラップし、Handlebars ヘルパーからグラフの新しいインスタンスを生成できます。

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>
于 2013-06-12T17:37:43.097 に答える