NVD3創建具有開始和結束角度的弧線

Question

我創建了d3可視化@Arc Visualization。

//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是否具有弧的包裝？

Answer 1

看來這裏是你正在尋找的樣本。

fiddle

您還可以找到它的例子nvd3提供。

custom start angle

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

希望它能幫助！