javascript - 创建一个具有可变属性高度的半圆形饼图

Question

我是 JS 的新手，正在查看 http://d3js.org/ 上的图表而且我无法理解如何操纵它们。基本上我想使用动画 donut chart ，但我只想显示一个半圆以及每个属性的不同高度(饼图中的部分)。我已经查看了其他一些教程，但我似乎无法理解它，我们将不胜感激任何帮助。

这是我使用的代码:

var resume_dataset =
    [
    {job:"", start:2007, end: 2009, color: "#eb9ca1"},
    {job:"", start:2008, end: 2010, color: "#f9a482"},
    {job:"", start:2010, end: 2011, color: "#d0ebe9"},
    {job:"", start:2013, end: 2014, color: "#cccc99"},
    {job:"", start:2012, end: 2013.25, color: "#ffcc99"},
    {job:"", start:2011, end: 2014, color:"#9999cc"}
    ];

    function year_to_angle(year) {
        return ((year - 2007)*Math.PI)/7-(Math.PI/2.0);
    }

    var width = 960,
        height = 500,
        radius = Math.min(width, height) / 2;

    var color = d3.scale.category20();

    var degree = Math.PI/180;


    var arc = d3.svg.arc()
        .innerRadius(radius - 180)
        .outerRadius(function(datum, i) { if(i != undefined){datum._i = i}; return radius - 30 + datum._i *10} );

    var job_arc = d3.svg.arc()
        .innerRadius(radius - 180)
        .outerRadius(function(d){return radius - 30 + 20*(d.start-2007)})
        .startAngle(function(d){return year_to_angle(d.start)})
        .endAngle(function(d){return year_to_angle(d.end)})
        //.onMouseOver(function(d){$(d.job).attr("class", "highlight")})

    var svg = d3.select("svg")
        .attr("width", width)
        .attr("height", height)
      .append("g")
        .attr("transform", "translate(" + width / 2 + "," + (height - 70)  + ")");

    var path = svg.selectAll("path")
        .data(resume_dataset)
        .enter().append("path")
        .attr("fill", function(d){return d.color})
        .attr("d", job_arc).attr("opacity", 0.7)




    </script>

明白了!感谢大家的贡献!

Answer 1

关于半圆，可以在pie变量中设置.startAngle和.endAngle。

var degree = Math.PI/180; // just to convert the radian-numbers
var pie = d3.layout.pie().sort(null).startAngle(-90*degree).endAngle(90*degree);