D3 Circle Pack Layout mit einer horizontalen Anordnung

Question

Ich versuche, eine Wordcloud mit dem D3-Pack-Layout mit einer horizontalen Anordnung zu erstellen.

Anstatt die Breite zu begrenzen, beschränke ich die Höhe.

Das Packlayout verteilt automatisch die Kreise mit dem größeren in der Mitte und den anderen um ihn herum. Wenn die Höhe begrenzt ist, wird die Kreisanordnung nicht horizontal erweitert, sondern die Größe jedes Kreises verringert.

Wie kann ich verhindern, dass das Layout die Größe der Kreise ändert und mit dem Hinzufügen zu den Seiten beginnt, wenn um den größeren herum kein Platz mehr ist.

Ich möchte etwas wie folgt aus: http://imgur.com/7MDnKHF

Aber ich dies nur zu erreichen: http://jsfiddle.net/v9xjra6c/

Dies ist meine aktuellen Code:

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

Dank!

Answer 1

Ihre Lösung wäre wie Verschmelzung dieses Example1 + Example2

So aus Beispiel 1 I den Mechanismus genommen haben die Kreise mit in den Grenzen zu beschränken, so dass sie nicht über die svg Höhe und Breite geht:

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

eine Skala Erstellen für Radius machen

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

die Daten wie pro 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 
}); 

führen Schließlich wird wie this

Hinweis suchen: Sie können die Höhe in dem Code reduzieren und die Kreise werden neu ordnen nach dem verfügbaren Platz.

Hinweis: Sie können auch um den Cluster herum gruppieren ähnliche Knoten wie in example in meinem Fall habe ich eine einzelne Gruppe Cluster gemacht.

Hoffe, das hilft!