2016-05-12 45 views
7

Sono di fronte a un problema in cui nel grafico a barre d3 viene generato al di fuori della regione div su ogni selezione di selectpicker.grafico d3 visualizzato al di fuori del bootstrap div

var svg = d3.select("#barchart").append("svg") 
 
    .attr("width", width + margin.left + margin.right) 
 
    .attr("height", height + margin.top + margin.bottom) 
 
    .append("g") 
 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

codice soffiato completa può essere trovata nella posizione jsbin sotto

http://jsbin.com/sodivamiqa/edit?html,js,output

Month,Success_Count,Failure_Count 
 
Dec,32,12 
 
Jan,35,5 
 
Feb,5,2 
 
March,40,2 
 
April,30,25 
 
May,12,10

Output Image

+0

cosa intendi per div esterno ... quando lo fai, sicuramente disegna all'interno del DOM con id = barchart. 'd3.select (" # barchart "). append (" svg ")' FYI: il tuo jsbin non disegna nulla. – Cyril

+0

Grazie a Cyril, poiché d3 si riferisce al file csv non è in grado di disegnare il grafico, ma i valori del grafico possono essere trovati al seguente link jsbin http://jsbin.com/pixicunasi/1/edit?html,js,output –

+0

qual è il valore di overflow css del # barchart? – Nikolai

risposta

2

Il 100% lo manterrà all'interno del div.

var svg = d3.select("#barchart").append("svg") 
      .attr("width",'100%') 
      .attr("height", '100%') 
      .append("g") 
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");