How to use d3.js with JSRender?

Question

I am trying to insert a d3 graph using JS render but its not working. There is no problem with the graph as such because I ran that separately to test it.

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

The following is the x-axes I am making using d3 which I want to insert in the above template

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

Any kind of help would be greatly appreciated. Thanks.

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