javascript - 如何将 d3.js 与 JSRender 结合使用？

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>

以下是我使用 d3 制作的 x 轴，我想将其插入到上述模板中

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

任何形式的帮助将不胜感激。谢谢。

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