d3图表显示在bootstrap div之外

Ahs*_* Md 7 javascript jquery svg d3.js twitter-bootstrap

我正面临着一个问题,即每个选择选择器选项中d3条形图在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 + ")");
Run Code Online (Sandbox Code Playgroud)

可以在以下jsbin位置找到完整的代码

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
Run Code Online (Sandbox Code Playgroud)

输出图像

kob*_*obe 3

100% 会将其保留在 div 内。

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