可视化的基础学习

前言

记录过年期间的学习情况，基本提升自己的知识范围。
接下来，主要学习基础内容如下:
1.canvas基本使用，   
2.svg基本使用，
3.zrzrender基本使用，
4.d3基本使用

canvas基本使用

 <canvas id="canvas" width="800" height="800"></canvas>

 const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d"); //获取到canvas 对象
      ctx.fillStyle = "red"; //填充颜色
      ctx.fillRect(0, 0, 50, 50); //绘制矩形
      //绘制线段
      ctx.beginPath();
      ctx.lineWidth = 1; //线段的宽度
      ctx.strokeStyle = "blue"; //线段的宽度
      ctx.moveTo(100, 100); //地点坐标
      ctx.lineTo(250, 75); //中间坐标
      ctx.lineTo(300, 100); //终点坐标
      ctx.stroke();
      //绘制圆形
      ctx.beginPath();
      ctx.lineWidth = 2;
      ctx.strokeStyle = "green";
      ctx.fillStyle = "red";
      ctx.arc(200, 200, 50, 0, 2 * Math.PI); //绘制图形
      ctx.stroke();
      ctx.fill();
      //绘制点
      ctx.beginPath();
      ctx.lineWidth = 1; //线段的宽度
      ctx.strokeStyle = "blue"; //线段的宽度
      ctx.moveTo(300, 300); //地点坐标
      ctx.lineTo(301, 301); //中间坐标

      ctx.stroke();

svgj基本使用

<svg width="800" height="800">
      <rect width="50" height="50" style="fill: red; stroke-width: 1px"></rect>
      <line
        x1="100"
        y1="100"
        x2="250"
        y2="75"
        style="stroke: blue; stroke-width: 1"
      ></line>
      <line
        x1="250"
        y1="75"
        x2="300"
        y2="100"
        style="stroke: blue; stroke-width: 1"
      ></line>
      <circle
        cx="200"
        cy="200"
        r="50"
        stroke="green"
        stroke-width="2"
        fill="red"
      ></circle>
      <line
        x1="300"
        y1="300"
        x2="301"
        y2="301"
        style="stroke: red; stroke-width: 1"
      ></line>
    </svg>

zrender基本使用

 <div id="container" style="width: 800; height: 800"></div>

const zr = zrender.init(document.getElementById("container"));
      const rect = new zrender.Rect({
        shape: {
          x: 0,
          y: 0,
          width: 50,
          height: 50,
        },
        style: {
          fill: "red",
          lineWidth: 0,
        },
      });
      const line = new zrender.Polyline({
        shape: {
          points: [
            [100, 100],
            [250, 75],
            [300, 100],
          ],
        },
        style: {
          stroke: "blue",
          lineWidth: 1,
        },
      });
      const circle = new zrender.Circle({
        shape: {
          cx: 200,
          cy: 200,
          r: 50,
        },
        style: {
          fill: "red",
          stroke: "green",
          lineWidth: 2,
        },
      });
      const point = new zrender.Polyline({
        shape: {
          point: [
            [300, 300],
            [301, 301],
          ],
        },
        style: {
          stroke: "red",
          lineWidth: 1,
        },
      });
      zr.add(rect);
      zr.add(line);
      zr.add(circle);
      zr.add(point);

d3基本使用

 <p>VUE</p>
    <p>react</p>
    <p>Agular</p>

    <button id="datum">datum</button>
    <button id="data">data</button>

 var body = d3.select("body");
      var p = body.selectAll("p");
      function doDatum() {
        var str = "ddkjdkld";
        p.datum(str);
        pl.text(function (d, i) {
          return `${d}-${i}`;
        });
      }
      function doData() {
        var dataset = ["vue", "rect", "Agular"];
        p.data(dataset).text(function (d, i) {
          return `${d}-${i}`;
        });
      }
      document.getElementById("datum").addEventListener("click", function (e) {
        doDatum();
      });
      document.getElementById("data").addEventListener("click", function (e) {
        doData();
      });