2

つまり、空白の画面から始めて、チャートが-90度（または270度）で描画を開始し、90度に達するまで半円を実行します。コードは次のようになります。

var width = 800;
var height = 400;
var radius = 300;
var grad=Math.PI/180;
var data = [30, 14, 4, 4, 5];
var color = d3.scale.category20();
var svg = d3.select("body").append("svg").attr("width", width).attr("height", 
`height).append("g").attr("transform", "translate(" + radius*1.5 + "," + radius*1.5 + 
")");
var arc = d3.svg.arc().innerRadius(radius - 100).outerRadius(radius - 20);
var pie = d3.layout.pie().sort(null);
svg.selectAll("path").data(pie(data)).enter().append("path").attr("d", 
arc).attr("fill", 
function(d, i) { return color(i); }).transition().duration(500).attrTween("d", sweep);

function sweep(a) {
  var i = d3.interpolate({startAngle: -90*grad, endAngle: -90*grad},{startAngle: -90*grad, endAngle: 90*grad});
   return function(t) {
    return arc(i(t));
    };
}

いくつかの例を見ると、アニメーションを取得できましたが、データをアークにバインド (または変換) できませんでした。私の感じでは、パスが 1 つしか描かれておらず、その後停止します。

補間を開始/終了 -90/90 および a に変更すると、色は異なりますが、すべてではありません。パイバーに開始/終了角度を追加すると、最初に単色の弧が表示され、次に他の部分がスライドする遷移が得られます（最初に弧がなかった場合は正しいでしょう-比率も少し間違っているようです）。最初の色を白に設定しても、すべてが白のままになるため、役に立ちません。

明らかな点が欠けているのではないかと心配していますが、これまでのところ行き詰まっています。誰かが私を正しい方向に向けることができるかもしれません。

4

2 に答える 2

1

かなりのバリエーションとテストの後、これらをコード行に使用して、何らかの形で機能し始めました。

var pie = d3.layout.pie().sort(null).startAngle(-90*grad).endAngle(90*grad);

var i = d3.interpolate({startAngle: -90*grad, endAngle: -90*grad},a);

最後の「問題」の 1 つは、svg の高さが小さすぎたため、一部のセグメントが切り取られたため、次のように変更したことです。

var height = 800;

私の検索を終了しました。ご検討いただきありがとうございます。

于 2013-03-28T11:08:06.413 に答える
0

の小さなタイプミス

var svg = d3.select("body").append("svg").attr("width", width).attr("height", `height)

次のようにする必要があります。

var svg = d3.select("body").append("svg").attr("width", width).attr("height", height)
于 2013-10-25T15:13:58.433 に答える