Mise en page du pack Cercle D3 avec disposition horizontale

Question

J'essaye de créer un wordcloud avec la disposition du pack D3 avec une disposition horizontale.

Au lieu de limiter la largeur, je limite la hauteur.

La disposition du pack dispose automatiquement les cercles avec le plus grand au centre et les autres autour de lui. Si la hauteur est limitée, au lieu d'étendre horizontalement la disposition des cercles, cela réduit la taille de chaque cercle.

Comment puis-je empêcher la mise en page de redimensionner les cercles et commencer à les ajouter sur les côtés s'il n'y a plus d'espace autour du plus grand.

Je veux quelque chose comme ceci: http://imgur.com/7MDnKHF

Mais je suis seulement parvenir: http://jsfiddle.net/v9xjra6c/

Ceci est mon code actuel:

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

Merci!

Answer 1

Votre solution serait comme la fusion de cette Example1 + Example2

donc de l'exemple 1 j'ai pris le mécanisme pour limiter les cercles dans les limites, de sorte qu'il ne va pas au-delà de la hauteur svg et largeur:

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

Création d'une échelle pour la fabrication de rayon

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

rendre les données aussi par 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 
}); 

Enfin résultat sera à la recherche comme this

Note: Vous pouvez réduire la hauteur dans le code et les cercles réorganisent selon l'espace disponible.

Remarque: Vous pouvez également jouer autour du cluster pour grouper des nœuds similaires comme dans example dans mon cas, j'ai créé un cluster de groupe unique.

Espérons que cela aide!