D3.js feste Breite Baum mit begrenzten Vertiefung

Question

Vom d3.js Beispiel http://bl.ocks.org/mbostock/1093025

Ich möchte tree.size verwenden, um die Breite des Baumes zu geben, aber ich finde den Standard-Einzug der Kinder zu groß . Wie im Dokument erwähnt, [wenn ich tree.nodeSize verwende, wird der Effekt von tree.size aufgehoben] [1]: "Die Eigenschaft nodeSize ist exklusiv für tree.size; die Einstellung tree.nodeSize setzt tree.size auf null."

var tree = d3.layout.tree() 
//.nodeSize([1, 20]); 
.size([10, 300]); 

Ich habe eine benutzerdefinierte jsfiddle für Klarheit: http://jsfiddle.net/orrw9p1k/1/

Sie können sehen, dass das erste Kind Weg auf der rechten Seite. Ich möchte, dass es ungefähr 20 px von der linken Seite max ist, aber ich möchte nicht, dass der Baum über seine Breite hinaus wachsen kann, wenn ich den Knoten 'analytics' bereitstelle.

Jeder Weg, um das Beste aus beiden Welten zu bekommen?

UPDATE: Hier ist ein funktionierendes Beispiel: http://jsfiddle.net/mneom9bf/

Answer 1

korrekt Ich verstehe Ihre Frage Unter der Annahme, können Sie dies durch „Normalisierung Tiefe“ für jedes Ihrer Knoten zu erreichen.

nodes.forEach(function(d) { d.y = d.depth * 100; }); 

nur fügen Sie diese in der Nähe von Ihrem Kommentar // Compute the "layout" und spielen mit dem Wert 100 es, wie Sie wollen zu bekommen.

bearbeiten: Sie können auch Ihre Baumgröße mit einem var width gesetzt und dann { d.y = d.depth * 100; } zu { d.y = d.depth * width/someNumber; } ändern, um es auf die gesamte Baumgröße abhängig zu machen