javascript - 使用变换将我的形状放置在正确的位置

Question

随机数据

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

Canvas 的宽度和高度

  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)

Answer 1

我自己解决了:

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

简单地添加旋转并更改比例:)