NVD3 创建具有开始和结束角度的弧答案

【问题标题】：NVD3 creating arcs with start and end angleNVD3 创建具有开始和结束角度的弧
【发布时间】：2014-11-24 21:06:51
【问题描述】：

我创建了一个 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 是否有弧的包装器？

【问题讨论】：

我已经回答你的问题了吗？

标签： d3.js nvd3.js

【解决方案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 });

希望对你有帮助！

【讨论】：