使div用d3填充整個屏幕

Question

在jQuery中，這很容易。 只需執行以下操作：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<body style="margin: 0; padding: 0">
<div id="test" style="background: black"></div>
</body>

<script>
$('#test').width($(window).width());
$('#test').height("100%");
</script>

演示：

http://www.frostjedi.com/terra/scripts/demo/fullsize-jquery.html

但是，在D3中，我不太清楚。 這是我在做什么：

<script src="http://d3js.org/d3.v3.min.js"></script>
<body style="margin: 0; padding: 0">
<div id="test" style="background: black"></div>
</body>

<script>
d3.select("#test").attr("width", window.innerWidth);
d3.select("#test").attr("height", "100%");
</script>

演示：

http://www.frostjedi.com/terra/scripts/demo/fullsize-d3.html

就像div根本沒有調整大小。

那么，如何使用D3處理jquery？ 謝謝！

Answer 1

jQuery正在設置CSS高度。 您可以通過以下方法在d3中實現相同的目的：

d3.select("#test").style("height", "100%");

Answer 2

也許您可以使用CSS來做到這一點。 在css文件中：

#fullScreen{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background-color:#000;
}

並在html文件中：

<body>
    <div id="fullScreen"></div>
</body>

使div用d3填充整個屏幕

問題描述

2 個解決方案

解決方案1
2 已采納 2013-04-07 07:36:42

解決方案2
0 2013-04-07 07:27:11

使div用d3填充整個屏幕

問題描述

2 個解決方案

解決方案1 2 已采納 2013-04-07 07:36:42

解決方案2 0 2013-04-07 07:27:11

解決方案1
2 已采納 2013-04-07 07:36:42

解決方案2
0 2013-04-07 07:27:11