在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%; 
} 

现在，当你调整窗口的大小，图表应该调整为好。