Javascript：如何覆盖整个区域？

Question

I'm writing code for the first time with SVG. 我是第一次用SVG编写代码。 I created a small program in javascript. 我在javascript中创建了一个小程序。 The rectangle does not start perfectly from the base of the area, remains a strip of light blue. 矩形不是从该区域的底部完美开始，仍然是一条浅蓝色。

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

Answer 1

You're setting the background colour to the <div> , and because of that you'll have to deal with default margins, paddings, computed height etc... 您将背景颜色设置为<div> ，因此您必须处理默认边距，填充，计算高度等...

A way simpler approach is setting the background colour to the SVG: 一种更简单的方法是将背景颜色设置为SVG：

graphic = d3.select("#graphicArea").append("svg")
      .attr("width", width)
      .attr("height", height)
      .attr("id", "graphic")
      .style("background", "#a7def2")

Here is your code with that change: 以下是您更改的代码：

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

If you want to stick with the <div> style you can try some changes, like max-heigh: 600px; 如果你想坚持<div>风格，你可以尝试一些改变，比如max-heigh: 600px; . 。

PS: Since this is your first D3/SVG code (by the way, kudos), here is a tip: you don't need an enter selection for the rect, not only because it's only one but mainly because the datum is meaningless. PS：因为这是你的第一个D3 / SVG代码（顺便说一句，赞不绝口），这里有一个提示：你不需要输入选择矩形，不仅因为它只是一个，而且主要是因为数据毫无意义。 Just append the element to the container. 只需将元素附加到容器即可。

Javascript：如何覆盖整个区域？

问题描述

1 个解决方案

解决方案1
3 已采纳 2018-05-19 10:05:28

Javascript：如何覆盖整个区域？

问题描述

1 个解决方案

解决方案1 3 已采纳 2018-05-19 10:05:28

解决方案1
3 已采纳 2018-05-19 10:05:28