유성과 d3 통합? 원형 차트 그리기

저는 Meteor에서 파이 차트를 그리려하지만, 나는 d3와 Meteor에 새로운 것이므로 무슨 일이 일어나고 있는지 정말로 이해하지 못하고 있습니다.유성과 d3 통합? 원형 차트 그리기

csv 파일에서 파이 차트를 그릴 다음 D3 코드는 유성의 밖에서 나를 위해 작동 :

<!DOCTYPE html> 
<meta charset="utf-8"> 
    <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> 
<style> 

body { 
    font: 30px "Montserrat"; 
    text-transform:uppercase; 
} 

svg { 
    padding: 10px 0 0 10px; 
} 

.arc { 
    stroke: #fff; 
} 

</style> 
<body> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script> 

var radius = 150, 
    padding = 10; 

var color = d3.scale.ordinal() 
    .range(["#f65c55","#c8e7ec"]); 

var arc = d3.svg.arc() 
    .outerRadius(radius) 
    .innerRadius(radius - 40); 

var pie = d3.layout.pie() 
    .sort(null) 
    .value(function(d) { return d.population; }); 

d3.csv("data.csv", function(error, data) { 
    color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Criteria"; })); 

    data.forEach(function(d) { 
    d.ages = color.domain().map(function(name) { 
     return {name: name, population: +d[name]}; 
    }); 
    }); 

    var legend = d3.select("body").append("svg") 
     .attr("class", "legend") 
     .attr("width", radius * 2) 
     .attr("height", radius * 2) 
    .selectAll("g") 
     .data(color.domain().slice().reverse()) 
    .enter().append("g") 
     .attr("transform", function(d, i) { return "translate(0," + i * 50 + ")"; }); 

    legend.append("rect") 
     .attr("width", 40) 
     .attr("height", 40) 
     .style("fill", color); 

    legend.append("text") 
     .attr("x", 50) 
     .attr("y", 20) 
     .attr("dy", ".35em") 
     .attr("font-size","20px") 
     .text(function(d) { return d; }); 

    var svg = d3.select("body").selectAll(".pie") 
     .data(data) 
    .enter().append("svg") 
     .attr("class", "pie") 
     .attr("width", radius * 2) 
     .attr("height", radius * 2) 
    .append("g") 
     .attr("transform", "translate(" + radius + "," + radius + ")"); 

    svg.selectAll(".arc") 
     .data(function(d) { return pie(d.ages); }) 
    .enter().append("path") 
     .attr("class", "arc") 
     .attr("d", arc) 
     .style("fill", function(d) { return color(d.data.name); }); 

    svg.append("text") 
     .attr("dy", ".35em") 
     .style("text-anchor", "middle") 
     .text(function(d) { return d.Criteria; }); 

}); 

</script>

나는 또한 유성 템플릿이 내가 이러한 차트를 그릴 것인지를 다음과 같이

<div class="tab-pane active" id="playback"> 
    {{> playback}} 
    </div>

그러나 웹 튜토리얼을 따라 두 가지를 통합하면 그래프가 그려지지 않습니다. 아무도 왜 그 이유를 이해하도록 도와 줄 수 있습니까? 미리 감사드립니다!

편집 :

Criteria,Disapproval, Approval 
Too Fast,1,2 
Too Slow,5,6 
Clarity,2,3 
Legibility,202070,343207

첫 번째 줄은 전설입니다, 나머지는 4 별도의 그래프위한 것입니다 : 얘기를 깜빡 했네요, data.csv은 다음과 같습니다.

출처

2014-05-09 user3195580

몇 가지 세부 정보를 제공합니다. 왜 그리지 않습니까? 아무것도 얻었 니? 오류 메시지가 보이십니까? – Ian

오류 메시지 없음 - 이유를 모르겠습니다. 나는 Meteor이 어떻게 작동하는지에 대해 아주 잘 알고 있지 않습니다. 왜 이것이 유성 밖에서 그러나 유성 내에서 유래하지 않는지에 대한 몇 가지 이유가 무엇입니까? – user3195580

코드로 DOM 요소에 액세스하기 전에 템플릿을 렌더링해야합니다.

Template.playback.rendered = function() { 
    // your D3 code 
}

또는 그것은 나를 위해 일하고 body 태그 예컨대 :

UI.body.rendered = function() { 
    // your D3 code 
}

출처

2014-05-11 10:37:02

Template.chart.rendered = function(){ 

    Deps.autorun(function() { 

     //d3 codeing here!! 
    } 
}

에 : 그래서 다음과 같이 템플릿 렌더링 방법 내부에 D3 코드를 넣습니다. Deps.autorun()없이 코딩하면 렌더되지 않습니다. 오 !! 어쩌면 HTML 페이지에서 한 번 더 할 수 있습니다. 그러나 제 경우에는 nvd3.org http://nvd3.org/livecode/index.html#codemirrorNav을 사용하고 있습니다. 그리고 이것은 당신이 분명히하기를 희망합니다.

출처

2014-05-11 16:57:37 user3246999

답변

관련 문제