我有一個靜態的3級旭日圖 -D3.js可縮放旭日沒有放大
http://colinwhite.net/Sunburst/
我的數據被嵌套使用此功能
http://colinwhite.net/Sunburst/js/treeRemapper.js
我的做法是基於這個例子 -
http://bl.ocks.org/mbostock/4348373
出於某種原因,我變焦和過渡並不是工作 -
var width = 960, height = 700,
radius = Math.min(width, height)/2,
color = d3.scale.category20c();
var x = d3.scale.linear().range([0, 2 * Math.PI]),
y = d3.scale.sqrt().range([0, radius]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width/2 + "," + height * .52 + ")");
var partition = d3.layout.partition()
.size([2 * Math.PI, radius * radius])
.value(function(d) { return 1; });
var arc = d3.svg.arc()
.startAngle(function(d) { return d.x; })
.endAngle(function(d) { return d.x + d.dx; })
.innerRadius(function(d) { return Math.sqrt(d.y); })
.outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });
d3.json("data/getJson.php", function(error, data) {
var treeData = genJSON(data, ['SourceID', 'ProviderID']);
var path = svg.selectAll("path")
.data(partition.nodes(treeData))
.enter().append("path")
.attr("d", arc)
.style("fill-rule", "evenodd")
.style("fill", function(d) { return color((d.children ? d : d.parent).name); })
.on("click", click);
function click(d) {
path.transition()
.duration(750)
.attrTween("d", arcTween(d));
}
});
function arcTween(d) {
var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
yd = d3.interpolate(y.domain(), [d.y, 1]),
yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
return function(d, i) {
return i
? function(t) { return arc(d); }
: function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
};
}
誰能告訴我什麼,我做錯了什麼?
哇。謝謝。沒有這個,我永遠不會得到解決方案。你有沒有遇到一個很好的資源來解釋外行,數學在這些例子中做了什麼?該文檔有點簡潔.. – Colin 2014-11-21 14:39:26
酷!我建議你稍微修改一下常量,看看公式是如何反應的。從那裏,你可以開始解構它(例如,什麼'd.x'代表什麼?什麼是x(d.x)'然後?等等)嘗試在控制檯中的公式,感受它:) – 2014-11-21 15:15:06