2012-10-03 17 views
1

随机数据使用变换来定位我不成材的正确途径

var data = [53245]; 
    var data2 = [28479, 234234]; 
    var data3 = [19697]; 
    var data4 = [41123,12313]; 

宽度&画布的高度

var w = 960, 
     h = 500, 
     r = Math.min(w, h)/2, 
     donut = d3.layout.pie().sort(null), 

这里是我决定我有多大希望一个弧是

arc = d3.svg.arc().innerRadius(r - 100).outerRadius(r - 20).startAngle(-2).endAngle(-1.34), 
arc2 = d3.svg.arc().innerRadius(r - 100).outerRadius(r - 20).startAngle(-1.34).endAngle(-0.68), 
arc3 = d3.svg.arc().innerRadius(r - 100).outerRadius(r - 20).startAngle(-0.68).endAngle(-0.02), 
arc4 = d3.svg.arc().innerRadius(r - 100).outerRadius(r - 20).startAngle(-0.02).endAngle(0.64), 
arc5 = d3.svg.arc().innerRadius(r - 100).outerRadius(r - 20).startAngle(0.64).endAngle(1.3), 
arc6 = d3.svg.arc().innerRadius(r - 100).outerRadius(r - 20).startAngle(1.3).endAngle(1.96), 

我试过使用转换,但我的形状倒过来。我希望它是一个不是U形的弧。

var svg = d3.select("body").append("svg:svg") 
    .append("svg:g") 
     .attr("transform", "translate(700,400) scale(1, -1)"); 

的颜色等的路径

var arcs = svg.selectAll("path") 
     .data(donut(data)) 
     .enter().append("svg:path") 
      .attr("fill", function(d, i) { return 'blue'; }) 
      .attr("d", arc) 
     .data(donut(data2)) 
      .enter().append("svg:path") 
       .attr("fill", function(d, i) { return 'green'; }) 
       .attr("d", arc2) 
     .data(donut(data3)) 
      .enter().append("svg:path") 
       .attr("fill", function(d, i) { return 'pink'; }) 
       .attr("d", arc3) 
     .data(donut(data4)) 
      .enter().append("svg:path") 
       .attr("fill", function(d, i) { return 'black'; }) 
       .attr("d", arc4) 

    .data(donut(data4)) 
      .enter().append("svg:path") 
      .attr("fill", function(d,i) {return 'yellow';}) 
      .attr("d",arc5) 

    .data(donut(data4)) 
      .enter().append("svg:path") 
      .attr("fill", function(d,i) {return 'orange';}) 
      .attr("d",arc6) 

回答

0

我已经解决了它自己:

.attr("transform", "translate(700,450) rotate(180) scale(-1, -1)") 

简单地添加旋转&改变规模:)