我正在玩D3.js,我得到了大部分工作.但是我想把我的svg形状放在一个圆圈里.所以我将用颜色和文字显示数据的差异.我知道如何绘制圆圈和饼图,但我想基本上有一个相同大小的圆圈.并没有让它们重叠,顺序无关紧要.我不知道从哪里开始,找出x& y为每个圆圈.
解决方法
对于任意大小的形状,使用D3的树形布局：
http://jsfiddle.net/nrabinowitz/5CfGG/,这是另一种方法
树形布局(docs,example)将根据给定的半径和返回任意两个项目中心之间间隔的函数计算出每个项目的x,y位置.在这个例子中,我使用了不同大小的圆圈,因此它们之间的分离是它们半径的函数：
var tree = d3.layout.tree()
.size([360,radius])
.separation(function(a,b) {
return radiusScale(a.size) + radiusScale(b.size);
});
使用D3树布局解决了第一个问题,将项目布置在一个圆圈中.正如@Markus指出的那样,第二个问题是如何计算圆的正确半径.为了方便起见,我在这里采取了一种稍微粗略的方法：我估计圆的周长是各个项目的直径之和,其间有给定的填充,然后从圆周计算半径：
var roughCircumference = d3.sum(data.map(radiusScale)) * 2 +
padding * (data.length - 1),radius = roughCircumference / (Math.PI * 2);
这里的圆周不准确,而且圆圈中的项目越少,这个就越少越准确,但它足够接近这个目的.
