d3.js에서 호를 만들기

Question

자바 스크립트 라이브러리 d3.js (http://d3js.org/)를 사용하여 캔버스 데이터 시각화를 생성하고 있습니다. 아크를 만들려고하지만 배열에서 데이터 매개 변수를 받아들이지 않습니다. 아무도 내가 뭘 잘못하고 있는지 알아? SVG에는 arc 요소가 없습니다

var chartConfig = { "canvasSize" : 800 } 

var radius = chartConfig.canvasSize/2; 
var pi = Math.PI; 

var vis = d3.select("#chart").append("svg") 
    .attr("width", radius * 2) 
    .attr("height", radius * 2) 
    .append("g") 
    .attr("transform", "translate(" + radius + "," + radius + ")"); 

var arcData = [ 
    {aS: 0, aE: 45,rI:radius/2,rO:radius} 
]; 
var arc = vis.selectAll("arc").data(arcData).enter().append("arc"); 
arc.attr("innerRadius", function(d){d.rI}).attr("outerRadius",function(d){d.rO}).attr("class","arc"); 

function degToRad(degrees){ 
    return degrees * (pi/180); 
} 

Answer 1

, 적절한 경로 요소를 정의해야합니다 : 이것은 내 코드입니다. 다행히도이를 수행하는 도우미 함수는 d3입니다.

var arc = d3.svg.arc() 
    .innerRadius(50) 
    .outerRadius(70) 
    .startAngle(45 * (Math.PI/180)) //converting from degs to radians 
    .endAngle(3) //just radians 

vis.append("path") 
    .attr("d", arc) 
    .attr("transform", "translate(200,200)") 

http://jsfiddle.net/g0r9n090/의 작업 예제;