2013-02-10 78 views
8

这个圈子组布置的一例(http://bl.ocks.org/4063269)是一个完美的项目我的工作,但它大小都是相对的圆圈彼此:可能在d3.js中使用固定圈大小的圆形包布局?

enter image description here

是否有指定固定半径的简单方法每个圈子?

我搜索了源代码,例子,谷歌和stackoverflow,似乎无法找到任何有用的东西。

圆圈的确切尺寸对我很重要。

+0

user2058412,你能看看我的答案吗?对你有用吗? – VividD 2014-06-26 11:15:04

回答

1

如果你按照你给的例子代码中,<circle>元素的尺寸正在这里决定:

node.append("circle") 
    .attr("r", function(d) { return d.r; }) 
// ... 

要解决的圈子,说,50,你可以做到这一点的大小:

node.append("circle") 
    .attr("r", function(d) { return 50; }) 
// ... 

更新

这意志,howeve r,如评论中指出的那样打破布局。为了解决这个问题,一个可以提供相同的value到每个节点:

// Returns a flattened hierarchy containing all leaf nodes under the root. 
function classes(root) { 
    var classes = []; 

    function recurse(name, node) { 
    if (node.children) node.children.forEach(function(child) { recurse(node.name, child); }); 
    else classes.push({packageName: name, className: node.name, value: node.size}); 
    } 

    recurse(null, root); 
    return {children: classes}; 
} 

到:

// Returns a flattened hierarchy containing all leaf nodes under the root. 
function classes(root) { 
    var classes = []; 

    function recurse(name, node) { 
    if (node.children) node.children.forEach(function(child) { recurse(node.name, child); }); 
    else classes.push({packageName: name, className: node.name, value: 1}); 
    } 

    recurse(null, root); 
    return {children: classes}; 
} 
+0

感谢您的回复!我实际上尝试过,但它打破了布局: http://cl.ly/image/2M3o1T2n2k1V。它应该看起来的样子是:http://cl.ly/image/1U1b3v3m152W – user2058412 2013-02-12 03:58:24

+0

更新了可能的修复答案。 – 2013-02-12 06:52:11

6

这是可能的,简单的事。第一个答案是准确的,但我相信我的是更简单,更明确,所以我也附加它。

请看看这个例子:jsfiddle

当你按下“恒”按钮,你会看到这样的事情:

enter image description here

关键代码行是这样的:

pack.value(function(d) { return 100; }) 

这将使数据圆圈半径不变。 100当然可以是任何常数。你可以在circle pack初始化中应用这一行(很可能这是你的情况),或者重新初始化(就像我的例子)。

希望这会有所帮助。