D3水平排列的圆形包装布局
D3 Circle Pack Layout with a horizontal arrangement
我正在尝试创建一个具有水平排列的D3包布局的wordcloud。
我不是限制宽度,而是限制高度。
包装布局会自动布置圆圈,较大的圆圈在中心,其他圆圈在他周围。如果高度有限,则不会水平扩展圆的布置,而是会减小每个圆的大小。
如果较大的圆圈周围没有更多的空间,我如何停止布局调整圆圈的大小并开始将其添加到边上。
我想要这样的东西:https://i.stack.imgur.com/nZocQ.jpg
但我只做到了这一点:http://jsfiddle.net/v9xjra6c/
这是我当前的代码:
var width,
height,
diameter,
padding,
format,
pack,
svg,
node;
var initSizes = function() {
var dimensions = { width: 900, height: 288 };
width = dimensions.width;
height = dimensions.height;
diameter = Math.min(width, height);
padding = 12;
format = d3.format(',d');
};
var initLayout = function() {
pack = d3.layout.pack()
.sort(null)
.size([width, height])
.padding(padding);
};
var createSVG = function() {
svg = d3.select('.chart-container').append('svg')
.attr('width', width)
.attr('height', height)
.attr('class', 'bubble');
};
var createBubbles = function() {
var dataset = pack.nodes(DATA);
node = svg.selectAll('.node')
.data(dataset.filter(function(d) { return !d.children; }))
.enter().append('g')
.attr('class', 'node')
.attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; });
node.append('title')
.text(function(d) { return d.name + ': ' + format(d.value); });
node.append('circle')
.attr('r', function(d) { return d.r; });
node.append('text')
.attr('dy', '.3em')
.style('text-anchor', 'middle')
.text(function(d) { return d.name.substring(0, d.r / 3); });
};
initSizes();
initLayout();
createSVG();
createBubbles();
谢谢!
您的解决方案就像合并这个Example1+Example2
因此,从示例1中,我采用了将圆限制在边界内的机制,这样它就不会超出svg的高度和宽度:
function tick(e) {
node
.each(cluster(10 * e.alpha * e.alpha))
.each(collide(.5))
//max radius is 50 restricting on the width
.attr("cx", function(d) { return d.x = Math.max(50, Math.min(width - 50, d.x)); })
//max radius is 50 restricting on the height
.attr("cy", function(d) { return d.y = Math.max(50, Math.min(height - 50, d.y)); }); }
创建用于制作半径的标尺
//so now for your data value which ranges from 0 to 100 you will have radius range from 5 to 500
var scale = d3.scale.linear().domain([0,100]).range([5, 50]);
按照示例2 制作数据
var nodes = data.map(function(d){
var i = 0,
r = scale(d.value),
d = {cluster: i, radius: r, name: d.name};
if (!clusters[i] || (r > clusters[i].radius)) {clusters[i] = d;}
return d
});
最后的结果将看起来像这个
注意:您可以减小代码中的高度,圆圈将根据可用空间重新排列。
注意:您也可以围绕集群来对类似的节点进行分组,就像在我的例子中我创建了一个单组集群一样。
希望这能有所帮助!
相关文章:
- 访问布局信息是否也会导致浏览器重排
- 使用agility.js进行页面布局和合成
- 如何将函数包装在函数中以避免代码重复
- 同位素库错误:未捕获错误无布局模式包装生产线8
- 如何实现此布局
- 有没有一个javascript图形绘制库可以进行气球树布局
- 为什么要包装每一个原型“;类“;JS中具有匿名函数的对象
- vaadin:使用自定义布局集成angular js
- 在'物品包装'
- 如何在jQuery中包装两个元素的组
- 如何在包装功能中咕哝concat
- 布局中的项目管理
- 如何操作d3js树布局
- 如何在 d3.js 的圆形包装布局中插入饼图
- 包装水平滚动布局问题
- D3圆形包装布局算法
- D3水平排列的圆形包装布局
- 包装水平布局问题
- 包装网格布局-边界/填充和覆盖的问题
- 流体包装布局