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 に答える