javascript – D3 Circle Pack布局,水平排列

我正在尝试用水平排列的D3包布局创建一个wordcloud.

我没有限制宽度,而是限制高度.

包装布局自动处理圆圈,中间较大的圆圈和周围的圆圈.如果高度有限,则不是水平扩展圆形布置,而是减小每个圆的大小.

如果较大的圆圈周围没有更多空间,我怎样才能停止布局调整圆圈的大小并开始将它们添加到圆边.

但我只是实现了这个目标：
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]);

根据Example2制作数据

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
});

最后结果将看起来像this

注意：您可以减小代码中的高度,圆圈将根据可用空间重新排列.

注意：您也可以在群集中进行游戏,以便像在example中那样对类似的节点进行分组.在我的情况下,我创建了一个组群集.

希望这可以帮助！

javascript – D3 Circle Pack布局,水平排列

猜你在找的CSS相关文章