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>

使用d3制作div填满整个屏幕

2 个答案: