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)
4

1 に答える 1

0

私はそれを自分で解決しました：

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

単純に回転を追加してスケールを変更しました:)

于 2012-10-04T03:05:26.127 に答える