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

Question

我需要在完整的浏览器中画一些东西 window。但是，我发现在 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>

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

有人可以帮忙吗？

谢谢德里克

Answer 1

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

给canvas一个ID并将其显示设置为'block'。似乎已经解决了您的问题:)

Fiddle : http://jsfiddle.net/4ukh5vjp/2/

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

How to set margin or padding in canvas object in D3.js

html

javascript

svg

d3.js