Question

我正在使用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。

Answer 1

我认为你会发现你的滚动条在滚动条本身的宽度/高度上移动。简单的解决方法是：

body {
  margin: 0;
  overflow: hidden;
}

示例here。

使用d3.js进行全窗口可视化

1 个答案: