0
Here is a link to the CodePenD3.js餅圖轉換
我有了它的數據發生變化時,設置被改變(現在我的數據只是隨機挑選,但我的公文正確做到這一點)的餅圖。我的問題是,我不明白使用轉換來更新餅圖。
這是創建餅圖的過程:
function createPieChart()
{
var width = 320,
height = 320,
radius = Math.min(width, height)/2;
var color = d3.scale.ordinal()
.range(["#0083CB", "#006BA5", "#00527f"]);
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(0);
var labelArc = d3.svg.arc()
.outerRadius(radius - 40)
.innerRadius(radius - 40);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.population; });
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width/2 + "," + height/2 + ")");
data = updateData();
var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function(d) { return color(d.data.age); });
g.append("text")
.attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
.attr("dy", ".35em")
.text(function(d) { return d.data.age; });
function type(d) {
d.population = +d.population;
return d;
}
}
這是我更新的餅圖功能。我得到的出現來自於D3 LIB錯誤ReferenceError: s is not defined
:
function updatePieChart()
{
svg.selectAll("path").data(pie(data)).transition().duration(500)
.attrTween("d", arcTween);
}
而且arcTween功能:
function arcTween(a) {
var i = d3.interpolate(this._current, a);
this._current = i(0);
return function(t) { return arc(i(t)); };
}
任何幫助將是巨大的。當我搜索時,我只能找到甜甜圈餅圖。
謝謝。
你的變量's'不)的'updateDegrees範圍('之內。什麼是's'? – ksav