2014-11-24 2 views
0

d3 시각화 @Arc Visualization을 만들었습니다.NVD3 시작 및 끝 각도로 호 만들기

//creating a scale 
    var cScale = d3.scale.linear().domain([0, 200]).range([-0.5*Math.PI, 0.5*Math.PI]); 

    //creating an arc 
    var arc = d3.svg.arc() 
      .innerRadius(50) 
      .outerRadius(100) 
      .startAngle(-0.5*Math.PI) 
      .endAngle(0.5*Math.PI); 
    vis.append("path").attr("d", arc).attr("transform", "translate(300,200)");*/ 
    var width = 600, height = 400; 
    var vis = d3.select("#svg_color"); 
    var data = [[0,60,"#AA8888"], [60,200,"#88BB88"]]; 
    var arc = d3.svg.arc().innerRadius(50).outerRadius(100).startAngle(function(d) { 
     return cScale(d[0]); 
    }).endAngle(function(d) { 
     return cScale(d[1]); 
    }); 
    vis.selectAll('path') 
     .data(data).enter().append('path').attr('d',arc).style('fill', function(d){ 
     return d[2]; 
    }).attr("transform", "translate(300,200)"); 

NVD3 라이브러리를 사용하여 유사한 예제를 만들거나 설명서를 찾을 수 없습니다.

NVD3 그것은 시작과 끝 각도를 사용하는 방법에 대한 예제 나 문서가없는 Pie and Donut charts example

@ 원형 및 도넛 차트를 만들 수있는 예제가 실려있다.

NVD3에 아크 래퍼가 있습니까?

+0

나는 이미 당신에게 대답합니까? –

답변

1

찾고있는 샘플이 여기에있는 것 같습니다. 예제가 제공 nvd3에

fiddle

또한 찾을 수 있습니다.

custom start angle

enter image description here

var chart = nv.models.pieChart() 
    .x(function(d) { return d.key }) 
    //.y(function(d) { return d.value }) 
    //.labelThreshold(.08) 
    //.showLabels(false) 
    .color(d3.scale.category10().range()) 
    .width(width) 
    .height(height) 
    .donut(true); 
chart.pie 
    .startAngle(function(d) { return d.startAngle/2 -Math.PI/2 }) 
    .endAngle(function(d) { return d.endAngle/2 -Math.PI/2 }); 

는 희망이 도움이!

+0

도움 감사합니다 !! –

관련 문제