首页 > 其他分享 >vis.js可动的3d图形

vis.js可动的3d图形

时间:2024-04-23 18:00:46浏览次数:28  
标签:axisMax 可动 graph 100% 50 vis var data 3d

  • 代码案例
<!DOCTYPE html>
<html>
  <head>
    <title>Graph 3D demo</title>
    <style>
        html,
        body {
          font: 10pt arial;
          padding: 0;
          margin: 0;
          width: 100%;
          height: 100%;
        }

        #mygraph {
          position: absolute;
          width: 100%;
          height: 100%;
        }
    </style>
    <script
      type="text/javascript"
      src="https://unpkg.com/vis-graph3d@latest/dist/vis-graph3d.min.js"
    ></script>
    <script type="text/javascript">
        var data = null;
        var graph = null;

        function custom(x, y) {
          return Math.sin(x / 50) * Math.cos(y / 50) * 50 + 50;
        }

        // Called when the Visualization API is loaded.
        function drawVisualization() {
          // Create and populate a data table.
          data = new vis.DataSet();

          // create some nice looking data with sin/cos
          var steps = 10; // number of datapoints will be steps*steps
          var axisMax = 314;
          var axisStep = axisMax / steps;
          for (var x = 0; x < axisMax; x += axisStep) {
            for (var y = 0; y < axisMax; y += axisStep) {
              var value = custom(x, y);
              data.add([{ x: x, y: y, z: value }]);
            }
          }

          // specify options
          var options = {
            width: "100%",
            height: "100%",
            style: "surface",
            showPerspective: true,
            showGrid: true,
            showShadow: false,
            keepAspectRatio: true,
            verticalRatio: 0.5,
            backgroundColor: {
              strokeWidth: 0,
            },
          };

          // create our graph
          var container = document.getElementById("mygraph");
          graph = new vis.Graph3d(container, data, options);
        }

        window.addEventListener("resize", () => {
          graph.redraw();
        });
        window.addEventListener("load", () => {
          drawVisualization();
        });

    </script>
  </head>
  <body onl oad="drawVisualization();">
    <div id="mygraph"></div>
      
  </body>
</html>
  • 效果图
点击查看详情

标签:axisMax,可动,graph,100%,50,vis,var,data,3d
From: https://www.cnblogs.com/dogleftover/p/18153457

相关文章

  • vis.js表面值3d图形
    代码案例<!DOCTYPEhtml><html><head><title>Graph3Ddemo</title><style>body{font:10ptarial;}</style><scripttype="text/javascript"src=......
  • react-native-vision-camera 扫二维码报错 [unknown/unknown] Waiting for the barcod
    1.问题:使用react-native-vision-camera库扫描解析二维码时,部分手机出现如下报错:2.解决:android/app/build.gradle文件中添加依赖:dependencies{//...implementation'com.google.mlkit:barcode-scanning:17.2.0'}3.参考:GitHub相关issues......
  • 基于 ESPHome 的 3D 打印机舱内控制系统(1): 荆棘满途之 FireBeetle 2 ESP32-C6 初始
    前言开一个新坑,谋划了很久,最初是为了测试Moonraker的Sensor组件,逐步扩展到设计一个完整的控制系统。硬件选择ESP系列芯片,功能足够,还支持WiFi/BT。软件看了一圈选择ESPHome,轻代码,功能强大配置简单易上手。本文涉及的硬件:DFRoborFireBeetle2ESP32-C6迷你开发板本文......
  • 领略未来办公魅力:办公楼3D可视化技术解析
    在数字化浪潮的推动下,办公楼的设计和管理也在经历着前所未有的变革。 想象一下,你站在一个虚拟的办公楼前,手指轻轻一点,就能深入其中,看到每一层、每一间办公室的布局,甚至每一个设备的运行状态。这不仅仅是一个简单的画面展示,更是一种全新的办公体验和管理方式的革新。 3D可视......
  • vis.js摄像机位置
    代码案例<!DOCTYPEhtml><html><head><title>Graph3Ddemo</title><style>body{font:10ptarial;}td{font:10ptarial;}</style><s......
  • vis.js绘制3d图形
    案例1代码案例<!DOCTYPEhtml><html><head><title>Graph3Ddemo</title><scripttype="text/javascript"src="https://unpkg.com/vis-graph3d@latest/dist/vis-graph3d.min.js"><......
  • vis.js分组多图折线图
    代码案例<!doctypehtml><html><head><title>Timeline</title><scripttype="text/javascript"src="https://unpkg.com/vis-timeline@latest/standalone/umd/vis-timeline-graph2d.min.js"></script>......
  • vis.js着色
    代码案例<!doctypehtml><html><head><title>Timeline</title><scripttype="text/javascript"src="https://unpkg.com/vis-timeline@latest/standalone/umd/vis-timeline-graph2d.min.js"></script>......
  • vis.js滚动折线图
    代码案例<!doctypehtml><html><head><title>Timeline</title><scripttype="text/javascript"src="https://unpkg.com/vis-timeline@latest/standalone/umd/vis-timeline-graph2d.min.js"></script>......
  • vis.js散点图
    代码案例<!doctypehtml><html><head><title>Timeline</title><scripttype="text/javascript"src="https://unpkg.com/vis-timeline@latest/standalone/umd/vis-timeline-graph2d.min.js"></script>......