1

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

这是我正在使用的代码：

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>

想通了！感谢大家的贡献！

4

1 回答 1

6

关于半圆，您可以在饼图变量中设置 .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);
于 2013-03-28T10:24:31.370 回答