如何在 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>

以下是我使用 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');

如何在 JSRender 中使用 d3.js？

How to use d3.js with JSRender?

javascript

jquery

templates

d3.js

jsrender