使用 d3.js 实现全窗口可视化答案

【问题标题】：full window visualisation with d3.js使用 d3.js 实现全窗口可视化
【发布时间】：2015-06-16 22:29:37
【问题描述】：

我将 d3.js 用于图表。我希望它填满整个窗口，没有边距，没有滚动条，全高和全宽。我不需要它响应。

这是我失败的尝试：

CSS：

body {
   margin: 0;
}

JS：

var width = window.innerWidth,
    height = window.innerHeight;

var svg = d3.select("#d3").append("svg")
    .attr("width", width)
    .attr("height", height);

HTML：

<body id="d3">    
    <script src="scripts/d3.js"></script>
    <script src="scripts/app.js"></script>
</body>

在 chrome 上显示两个工具栏（生成的 SVG 实际上比正文稍大）。

编辑：第二次尝试，在 chrome 中工作，在 IE 中高度仍然不正确：

var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
    height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

和：

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

（归功于：Get the browser viewport dimensions with JavaScript）

PS : 这简直是疯了

第二次编辑：：window.innerWidth 和 window.innerHeight 有效（至少在 chrome 和 ie11 中）。如果您还用头撞墙，请注意 元素检查器报告的高度值错误 ...我使用图像编辑器检查了视口的高度和宽度，它们与窗口匹配.innerWidth 和 window.innerHeight。

【问题讨论】：

标签： d3.js

【解决方案1】：

我想您会发现您的滚动条会根据滚动条本身的宽度/高度移动。简单的解决方法是：

body {
  margin: 0;
  overflow: hidden;
}

例如here。

【讨论】：

这确实隐藏了滚动条，但是如果您使用元素检查器查看 SVG，它仍然比正文高。
忘记我之前的评论，元素检查器报告了错误的高度值:(