javascript - 将 Handlebars 与 D3.js 结合使用

Question

我有一个 Handlebar 模板，我想将 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>

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}} 
</script>

Answer 1

如果模板中应该只有一个图形实例，那么您需要做的就是告诉 d3 在 <script id="datatemplate"> 中附加 svg 元素。标记而不是正文。

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

另一方面，如果您希望模板在每次调用时都生成一个 d3 图，我认为这不是正确的做法。由于 d3 将数据绑定(bind)到 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>