Question

我是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>

弄清楚了！感谢大家的贡献！

Answer 1

关于半圈，你可以在饼变量中设置.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);

创建具有可变属性高度的半圆饼图

1 个答案: