Javascript D3.js可缩放的太阳爆发未缩放
我有一个静态的三级太阳爆发图- 我的数据正与此函数嵌套 我的方法基于这个例子- 由于某种原因,我的变焦和粗花呢不起作用-Javascript D3.js可缩放的太阳爆发未缩放,javascript,d3.js,zooming,sunburst-diagram,Javascript,D3.js,Zooming,Sunburst Diagram,我有一个静态的三级太阳爆发图- 我的数据正与此函数嵌套 我的方法基于这个例子- 由于某种原因,我的变焦和粗花呢不起作用- 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().r
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); };
};
}
有人能告诉我我做错了什么吗?您引用的示例基于“重新缩放”/“重新调整”
x
和y
域/范围。在您的示例中,您定义了一个不依赖于x
和y
比例的arc
,因此,如果更改这些比例,则没有任何效果
那你能做什么呢
首先,需要取出分区的大小
(因为您将使用刻度来处理它):
(删除它,而不是注释:))
接下来,您必须使用和弧
,这取决于刻度,例如,如示例中所示:
var arc = d3.svg.arc()
.startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
.endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
.innerRadius(function(d) { return Math.max(0, y(d.y)); })
.outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });
如您所见,max
和min
有点挤压“隐藏”段
交叉手指,跑吧
(我使用flare.json进行了尝试,在这里确实有效)
注意
如果您还计划在放大时添加重新称重,请看一个很好的示例:Wow。非常感谢。如果没有这个,我永远不会找到解决办法。你有没有遇到过一个好的资源,可以向外行解释这些例子中的数学原理?文档有点简洁..酷!我建议你修改一下常数,看看公式是怎么反应的。从那里,您可以开始解构它(例如,d.x
代表什么?什么是x(d.x)
然后?等等)在控制台中尝试公式,感受一下:)
var arc = d3.svg.arc()
.startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
.endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
.innerRadius(function(d) { return Math.max(0, y(d.y)); })
.outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });