Nvd3圖表巨大與官方Css

Question

我遇到了一些意外的問題與幾個Nvd3圖表。我使用nvd3 css文件（nv.d3.min.css）編碼它們。沒有它，一切都好，但是當我突然添加它時，第二張圖表佔用了大量空間（1500x1500）。正常的大小是450x450，但現在它是

如果我看在鉻的控制檯，並取消選擇樣式屬性「寬度：100％;」和「身高：100％;」它工作（實際上只有一個）。另一個改變desssstributes的是「用戶代理樣式表」。

我不能明白爲什麼，因爲我認爲大小明確地編碼，而該圖表的配置

HTML

<div id="charts"> 
<div id="piechart" ><svg></svg></div> 
<div id="chart"><svg></svg></div> 
</div> 

NVD3

function setupGraph(data_graph) { 
     nv.addGraph(function() { 
      var pieChart = nv.models.pieChart(); 
      pieChart.margin({top: 30, right: 60, bottom: 20, left: 60}); 
      var datum = data_graph[0].values; 

     pieChart.tooltipContent(function(key, y, e, graph) { 
       var x = String(key); 
        var y = String(y); 

        tooltip_str = '<center><b>'+x+'</b></center>' + y; 
        return tooltip_str; 
        }); 

     pieChart.showLabels(true); 
     pieChart.donut(false); 

     pieChart.showLegend(true); 

      pieChart 
       .x(function(d) { return d.label }) 
       .y(function(d) { return d.value }); 

      pieChart.width(450); 
      pieChart.height(450); 

       d3.select('#piechart svg') 
       .datum(datum) 
       .transition().duration(350) 
       .attr('width',450) 
       .attr('height',450) 
       .call(pieChart); 

     nv.utils.windowResize(chart.update); 
     return chart; 
      }); 

    } 

    function setupGraph2(data_graph) { 
     nv.addGraph(function() { 
     var chart = nv.models.discreteBarChart() 
      .x(function(d) { return d.label }) //Specify the data accessors. 
      .y(function(d) { return d.value }) 
      //.valueFormat(d3.format(',.2f')) 
      .staggerLabels(true) //Too many bars and not enough room? Try staggering labels. 
      .tooltips(false)  //Don't show tooltips 
      .showValues(true)  //...instead, show the bar value right on top of each bar. 
      .transitionDuration(350) 
      ; 

      chart.width(450); 
      chart.height(450); 


     d3.select('#chart svg') 
       .datum(data_graph) 
       .attr('width',450) 
       .attr('height', 450) 
       .call(chart); 

      nv.utils.windowResize(chart.update); 
     return chart; 
      }); 

任何人可以看到的是發生了什麼？

Answer 1

只是覆蓋nvd3.css樣式表的默認寬度和高度的屬性，創造你的樣式表的規則，並確保它是後的nvd3樣式表加載。

最後一條規則（具有相同specificity）勝：

svg { 
    width : auto; 
    height : auto; 
} 

，或者創建一個更具體的規則只作用於你的svgs，如：

#charts svg { 
    width : 450px; 
    height : 450px; 
}