如何将 d3.js 与 JSRender 一起使用？答案

【问题标题】：How to use d3.js with JSRender?如何将 d3.js 与 JSRender 一起使用？
【发布时间】：2017-12-20 06:24:43
【问题描述】：

我正在尝试使用 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>

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

【问题讨论】：

你在使用 requirejs 和 renderjs / jsviews 吗？包括 d3.js？您在控制台中看到的错误是什么？
@AnupYadav 控制台中没有出现错误。图表未显示。
你为什么不为@borismoore 创建js fiddle 在fiddle 之后也能很好地回答。
stackoverflow.com/questions/32489607/… 试试这个答案鲍里斯摩尔回答，这应该工作。
@AnupYadav 我看到了，并试图做出改变。如果你看到我的代码，你会发现相似之处。

标签： javascript jquery templates d3.js jsrender

【解决方案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');

【讨论】：

请检查 jsfiddle，jsfiddle.net/3hpw2du8/10 现在我也对此进行了更改。
我得到 tmpl.link 不是函数
检查 jsfiddle 它在那里工作，所以复制粘贴该代码。 Jsfiddle 也缺少 jquery，我补充说。