在 dc.js 中调整 SVG 的大小答案

【问题标题】：resizing SVG in dc.js在 dc.js 中调整 SVG 的大小
【发布时间】：2014-01-08 12:38:23
【问题描述】：

我正在尝试调整 dc.js 中的 SVG 大小。在主页本身的纳斯达克示例中。当我更改宽度/高度时，它会剪切 svg 而不是调整其大小。例如，将宽度和高度更改为一半 .. 它将 svg 切成一半，只显示一半。我知道我在这里做了一些非常愚蠢的事情。

请提出建议。

【问题讨论】：

标签： javascript svg d3.js dc.js

【解决方案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"
})

【讨论】：

【解决方案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%;
}

现在，当您调整窗口大小时，图表也应该调整大小。

【讨论】：

与使用专门为此目的设计的 viewBox 相比，似乎复杂且缓慢。