D3 Circle Pack Layout con disposizione orizzontale

Question

Sto provando a creare un wordcloud con il layout del pacchetto D3 con una disposizione orizzontale.

Invece di limitare la larghezza, sto limitando l'altezza.

Il layout del pacchetto dispone automaticamente dei cerchi con il più grande al centro e gli altri intorno a lui. Se l'altezza è limitata, invece di espandere la disposizione dei cerchi orizzontalmente, riduce le dimensioni di ogni cerchio.

Come posso impedire al layout di ridimensionare i cerchi e iniziare ad aggiungerli ai lati se non c'è più spazio intorno a quello più grande.

voglio qualcosa di simile: http://imgur.com/7MDnKHF

Ma io sono solo il raggiungimento di questo: http://jsfiddle.net/v9xjra6c/

Questo è il mio codice corrente:

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

Grazie!

Answer 1

La soluzione sarebbe come la fusione questo Example1 + Example2

Quindi da Esempio 1 Ho preso il meccanismo per limitare i cerchi con dei limiti, in modo tale che essa non va oltre l'altezza SVG e larghezza:

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

Creazione di una scala per rendere raggio

//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]); 

rendere i dati come da Esempio 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 
}); 

Infine risultato sarà che sembra this

Nota: È possibile ridurre l'altezza nel codice ed i cerchi si riorganizzare come per lo spazio a disposizione.

Nota: È anche possibile giocare attorno al cluster per raggruppare nodi simili come nel example nel mio caso ho creato un cluster di gruppo singolo.

Spero che questo aiuti!