Javascript 制作一个div用d3填充整个屏幕_Javascript_D3.js

Javascript 制作一个div用d3填充整个屏幕

javascript d3.js

Javascript 制作一个div用d3填充整个屏幕,javascript,d3.js,Javascript,D3.js,在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> <scri

在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>


$（'#test'）.width（$（window.width（））；
$（'测试'）。高度（“100%）；

演示：

然而，在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>


d3.选择（“#测试”）.attr（“宽度”，window.innerWidth）；
d3.选择（“#测试”）.attr（“高度”、“100%”）；

演示：

好像这个div根本没有被调整大小

那么，对于D3，我该如何处理jquery？谢谢

也许你可以用css来做这件事。在css文件中：

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

在html文件中：

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

jquery正在设置css高度。您可以通过以下方式在d3中实现相同的目标：

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

我应该看到黑屏吗？这两个脚本都不适用于firefox 19Hmmm-很有趣。我用的是Chrome。让我想想怎么回事。jquery现在正在Firefox中运行。我用“100%”替换了$（window）.height（）。哦，我在谷歌上搜索了一下，得到了，这似乎是正确的解决方案，嗯，比我快了几秒钟。原始代码中的错误是，他使用attr（）设置html属性，而不是CSS。另外，window.innerHeight在这里似乎也可以正常工作。将force布局对象的高度设置为100%怎么样