Problem beim Entwerfen eines d3 js-Baumdiagramms in einem DIV

Question

Ich habe ein Baumdiagramm, das ich in ein Div-Tag einfügen möchte, damit ich das Diagramm ausblenden und seine Positionierung einfach steuern kann.

Aber das funktioniert nicht, wenn ich versuche, d3-Diagramm in ein anderes Div zu passen.

auf diese Weise versucht -

<div class="overviewMain" id="overviewMain"> 
    <div class="overviewHeader"><span>Overview</span></div> 
    <div class="treediv" style="margin-top:60px;"> 
     <div id="tree"></div> /* --> D3 Tree chart */ 
    </div> 
</div> 

Hier ist die Arbeits Demo: http://jsfiddle.net/JnNwu/974/

was bin ich dabei?

Answer 1

Sie hängen Ihr SVG an body anstelle der div an.

var svg = d3.select("body").append("svg") 

Ändern Sie diese #tree

var svg = d3.select("#tree").append("svg") 

die Arbeits JSFiddle Siehe zum gewünschten div anhängen.