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