在dc.js中調整SVG大小

Question

我正在嘗試調整dc.js中的SVG大小。 在主頁本身的NASDAQ示例中。當我改變寬度/高度時，它削減了svg而不是調整它的大小。例如，將寬度和高度更改爲一半..它將svg剪成一半，只顯示一半。我知道我在這裏真的很傻。

請建議。

Answer 1

你必須使用viewBox屬性。

viewBox屬性允許指定給定的一組圖形 拉伸以適合特定的容器元素。 - https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

這裏是例子 - http://jsfiddle.net/LPWhE/ 如果你改變容器的寬度和高度在CSS您調整SVG。

svg.attr({ 
    "width": "100%", 
    "height": "100%", 
    "viewBox": "0 0 250 250" 
}) 

Answer 2

這是我做的。在我的HTML頁面中，我有以下行：

<div id="resize"></div> 

在我的js頁面中，我設置了一個名爲「barChart」的條形圖圖形。我有以下順序：

var width = document.getElementById("resize").offsetWidth; 

barChart = dc.barChart("#barChart"); 

barChart.width(width) 
    .height(350) 
    .margins({top: 10, right: 40, bottom: 30, left: 40}) 
    .dimension(rooms) 
    .group(kWOccupiedData) 
    .elasticY(true) 
    .gap(1) 
    .x(d3.scale.ordinal().domain([0, 5])) 
    .xUnits(dc.units.ordinal) 
    .yAxisLabel("kWh") 
    .xAxisLabel("Room") 
    .renderHorizontalGridLines(true) 
    .transitionDuration(700); 

window.onresize = function(event) { 
    var newWidth = document.getElementById("resize").offsetWidth; 

    barChart.width(newWidth/2) 
    .transitionDuration(0); 

    dc.renderAll(); 

    barChart.transitionDuration(750); 
}; 

最後，在我的CSS樣式表，我把：

.resize { 
    width: 100%; 
    height: 350px; 
} 

#barChart { 
    clear: both; 
    width: 100%; 
} 

現在，當你調整窗口的大小，圖表應該調整爲好。