Question

我需要在完整的浏览器窗口中绘制一些东西。但是，我发现在D3.js中使用canvas对象进行设置有点棘手。如果我删除了js代码，右侧总会有一个滚动条。

这是我的代码：

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">    
</head>
<body style="margin:0;">

<div id="background" style="position: absolute; height: 100%; width: 100%; "> 
</div>
<script src="d3.min.js"></script>
<script>
var width = document.getElementById("background").offsetWidth;
var height = document.getElementById("background").offsetHeight;
var canvas = d3.select("#background").append("canvas")
    .attr("width", width)
    .attr("height", height);
</script>
</body>
</html>

如果删除代码，orignial html将没有滚动条。所以我怀疑这可能与画布对象的边距或填充有关。

有人可以帮忙吗？

由于德里克

Answer 1

.canvas{
    padding: none;
    margin: none;
    display:block;
}

为画布指定ID并将其显示设置为“阻止”。似乎已经解决了你的问题：）

小提琴：http://jsfiddle.net/4ukh5vjp/2/

如何在D3.js中设置画布对象的边距或填充

1 个答案: