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

希望它有所帮助！