D3サークルパック水平配置のレイアウト

Question

D3パックレイアウトのワードクラウドを水平に配置しようとしています。

幅を制限する代わりに、高さを制限しています。

パックレイアウトは、大きなものを中央に配置し、周囲のものを自動的に配置します。高さが制限されている場合は、円の配置を水平方向に拡張するのではなく、各円のサイズを小さくします。

レイアウトを停止して円のサイズを変更し、大きいものの周囲にスペースがない場合は、それらを側面に追加する方法を教えてください。

私はこのような何かしたい： http://imgur.com/7MDnKHF

をしかし、私はこれだけを達成しています： 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(); 

ありがとう！

Answer 1

あなたの解決策は、私はそれがSVGの高さと幅を超えないように、境界内で円を制限する仕組みをとっている例1からだから、このExample1 + Example2

をマージするようになります：

半径

//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に従ってデータを作る作るための尺度を作成

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

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

ノートのようなことになるだろう結果：あなたは、コード内の高さを低くすることができますし、円は利用可能なスペースごとに再編成されます。

注：ます。また、私は1つのグループのクラスタを作ってきた私の場合exampleのようにグループ同様のノードにクラスタの周りに再生することができます。

希望すると便利です。