时间戳

首页 > 解决方案 > Javascript：如何覆盖整个区域？

javascript - Javascript：如何覆盖整个区域？

问题描述

我是第一次使用 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>

标签： javascriptcssd3.jssvg

解决方案

您将背景颜色设置为<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 代码（顺便说一句，赞），这里有一个提示：您不需要为 rect 输入选择，不仅因为它只是一个，而且主要是因为数据没有意义。只需将元素附加到容器中。

推荐阅读