JSRenderでd3.jsを使用するには？

Question

JSレンダリングを使用してd3グラフを挿入しようとしていますが、動作していません。私はそれをテストするために別にそれを走らせたので、グラフに問題はありません。次

は

<script id="renderTemplate" type="text/x-jsrender"> 
    <p>{{:name}}</p> 
    <p>{{:dept}}</p> 
    //Chart goes here 
    <div class="chart" data-link="{graph}"></div> 
</script> 

私は助けの任意の種類をいただければ幸いです

<script> 
function initChart(element,data){ 
var xAxis = d3.svg.axis(); 
var axisScale = d3.scale.linear() 
       .domain([0,50]) 
          .range([0,100]); 

var xAxis = d3.svg.axis() 
         .scale(axisScale); 

typeof(xAxis); 
var svgContainer = d3.select(element).append("svg") 
            .attr("width", 700) 
            .attr("height", 100); 

var axisScale = d3.scale.linear() 
          .domain([0, 50]) 
          .range([0, 400]); 
var xAxis = d3.svg.axis() 
         .scale(axisScale) 
         .tickValues(d3.range(axisScale.domain()[0], axisScale.domain()[1] + 10, 10)); 

var xAxisGroup = svgContainer.append("g") 
            .attr("transform", "translate(20,50)") 
            .call(xAxis); 
} 
$.views.tags("graph", { 
init: function(tagCtx, linkCtx) { 
this.data = tagCtx.args[0]; 
this.svg = initChart(linkCtx.elem, this.data); 
} 
}); 
var tmpl = $.templates("#renderTemplate"); 
</script> 

上記テンプレートに挿入したい私はD3を使用して作っていますx軸です。ありがとう。

Answer 1

<script id="renderTemplate" type="text/x-jsrender"> 

    //Chart goes here 
    <div class="chart" data-link="{graph}"></div> 
</script> 
<div id="container"></div> 

=========================================== ======

function initChart(element,data){ 
console.log("element"); 
console.log("data"); 

var xAxis = d3.svg.axis(); 
var axisScale = d3.scale.linear() 
       .domain([0,50]) 
          .range([0,100]); 

var xAxis = d3.svg.axis() 
         .scale(axisScale); 

typeof(xAxis); 
var svgContainer = d3.select(element).append("svg") 
            .attr("width", 700) 
            .attr("height", 100); 

var axisScale = d3.scale.linear() 
          .domain([0, 50]) 
          .range([0, 400]); 
var xAxis = d3.svg.axis() 
         .scale(axisScale) 
         .tickValues(d3.range(axisScale.domain()[0], axisScale.domain()[1] + 10, 10)); 

var xAxisGroup = svgContainer.append("g") 
            .attr("transform", "translate(20,50)") 
            .call(xAxis); 
} 
$.views.tags("graph", { 
init: function(tagCtx, linkCtx) { 
this.data = tagCtx.args[0]; 
this.svg = initChart(linkCtx.elem, this.data); 
}, 
onAfterLink: function(tagCtx, linkCtx) { 
    var tag = this; 
    $.observable(tag.data).observeAll(function() { 
     updateChart(tag.data, tag.svg); 
    }); 
    } 
}); 
console.log("==="); 
var tmpl = $.templates("#renderTemplate"); 
tmpl.link('#container');