[英]How can I make my Vue for-loop generated buttons cover the entire area of my div?
[英]Javascript: how to cover entire area?
我是第一次用SVG編寫代碼。 我在javascript中創建了一個小程序。 矩形不是從該區域的底部完美開始,仍然是一條淺藍色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#graphicArea {
width: 1400px;
background: #a7def2;
}
</style>
</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")
.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);
</script>
</body>
您將背景顏色設置為<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代碼(順便說一句,贊不絕口),這里有一個提示:你不需要輸入選擇矩形,不僅因為它只是一個,而且主要是因為數據毫無意義。 只需將元素附加到容器即可。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.