使用d3.js完整窗口可視化

我使用d3.js作爲圖表。我希望它填滿整個窗口，沒有邊距，沒有滾動條，全高和全寬。我沒有必要讓它響應。使用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是實現的盟友稍大於身體）。

編輯：第二次嘗試，作品中鉻，高度仍然在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：這是純粹的瘋狂

2nd編輯：：window.innerWidth和window.innerHeight工作（至少在chrome和ie11中）。如果您還在撞牆注意元素檢查器報告高度爲的錯誤值...我使用圖像編輯器檢查了視口的高度和寬度，並且它們與window.innerWidth和窗口匹配。 innerHeight。

來源

2015-06-16 Christophe Le Besnerais

我想你會發現你的滾動條移動滾動條的寬度/高度本身。易於修復的是：

body { 
    margin: 0; 
    overflow: hidden; 
}

示例here。

來源

2015-06-17 01:05:00 Mark

這確實會隱藏滾動條，但是如果您使用元素檢查器查看SVG，它仍比身體高。 –

忘掉我以前的評論，元素檢查員報告錯誤的值爲高度:( –

使用d3.js完整窗口可視化

回答

相關問題