Вы устанавливаете цвет фона на <div>, и поэтому вам придется иметь дело с полями по умолчанию, отступами, вычисленной высотой и т. Д. *
Более простой подход - установкацвет фона для SVG:
graphic = d3.select("#graphicArea").append("svg")
.attr("width", width)
.attr("height", height)
.attr("id", "graphic")
.style("background", "#a7def2")
Вот ваш код с этим изменением:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="outer-wrapper">
<div id="graphicArea"> </div>
</div>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
var width = 1400;
var height = 600;
var graphic;
var gocceAlSec = 7;
graphic = d3.select("#graphicArea").append("svg")
.attr("width", width)
.attr("height", height)
.attr("id", "graphic")
.style("background", "#a7def2")
.attr("overflow", "hidden");
var dataset = [0];
graphic.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", 0)
.attr("y", 600)
.attr("width", 1400)
.attr("height", 0)
.style("fill", "blue")
.transition()
.duration(50000)
.attr("height", 600)
.attr("y", 0);
function makeRain() {
for (var i = 0; i < gocceAlSec; i++) {
startX = Math.random() * width,
startY = Math.random() * 100 - 100,
endX = startX;
endY = height + 200;
graphic.insert("circle")
.attr("cx", startX)
.attr("cy", startY)
.attr("r", 2)
.style("fill", "blue")
.transition()
.duration(2000)
.attr("cx", endX + 100)
.attr("cy", endY)
.remove();
};
}
d3.timer(makeRain, 100);
</script>
</body>
Если вы хотите придерживаться стиля <div>, вы можете попробовать некоторые изменения, например max-heigh: 600px;.
PS: С этого моментаэто ваш первый код D3 / SVG (кстати, слава), вот совет: вам не нужно вводить ввод для прямоугольника, не только потому, что он только один, но в основном потому, что данные не имеют смысла.Просто добавьте элемент в контейнер.