d3餅圖轉換與attrtween

我試圖以某種方式在半圓環圖中掃描，意思是從空白屏幕開始，圖表開始在-90度（或270）處繪製並執行半圓直到達到90度。代碼如下：d3餅圖轉換與attrtween

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)); 
    }; 
}

看幾個例子我設法拿到了動畫，但是，我不能在數據綁定（或轉換）的弧。我的感覺是，只有一條路徑被繪製，然後停止。

如果我改變插值開始/結束-90/90和一，我得到不同的顏色，但不是所有的人。將開始/結束角添加到pie-var中給了我一個轉換，其中在開始處顯示單色弧，然後其他部分滑入（如果開始時沒有弧，這將是正確的 - 比例也顯得有點不對）。將初始顏色設置爲白色並不能解決問題，因爲這樣一切都保持白色。

我害怕我錯過了一個明顯的觀點，但到目前爲止我卡住了，也許有人可以指出我在正確的方向。

來源

2013-03-27 Herbert Hubert

頗有些變化和考驗，它在某種程度上開始工作，用這些來的代碼行：

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

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

一個最後的「問題」是，SVG的高度太小，所以一些細分了切斷，所以改爲

var height = 800;

結束了我的搜索。感謝您的任何考慮。

來源

2013-03-28 11:08:06

在

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-25 15:13:58 muyueh

d3餅圖轉換與attrtween

回答

相關問題