visjs实现三维可视化坐标轴分布图表效果代码-html代码-BFW代码库

visjs实现三维可视化坐标轴分布图表效果代码

代码语言：html

所属分类：图表

代码描述：visjs实现三维可视化坐标轴分布图表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vis.4.21.0.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/math.2.5.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vis.4.21.0.js"></script>


</head>

<body>
  <div>
    f(x,y) =
    <input type="text" id="inputEquation3D" />

  </div>
  <div>
    x ranges from
    <input type="text" id="xStart" /> to
    <input type="text" id="xEnd" />
  </div>
  <div>
    y ranges from
    <input type="text" id="yStart" /> to
    <input type="text" id="yEnd" />
  </div>
  <div>
    number of points to plot
    <input type="text" id="steps" />
  </div>
  <div>
    <input type="button" value="Graph 3D" id="calculate3D" cd/>
  </div>


  <!--
    <div>
        f(x) =
        <input type="text" id="inputEquation2D" />
        <input type="button" value="Graph 2D" id="calculate2D" cd/>
    </div>
-->


  <h3 id="example">Example Graph: f(x,y) = x + y </h3>

  <div id="visualization"></div>



      <script>
/*
Copyright by: Alex Chenxing Ouyang
Github Repo: https://github.com/AlexOuyang/3DGrapher

*/

// Create and populate a data table.
// var f1 = function (x) {
//     return Math.sin(x);
// }
//
// var f2 = function (x, y) {
//     return Math.sin(x) + Math.cos(y);
// }
//
// var f3 = function (x, y) {
//     return 1 / (x + y);
// }

console.log("good");

math.config({
  number: 'number' // Default type of number: 
    // 'number' (default), 'bignumber', or 'fraction'
});

function escapeRegExp(str) {
  return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}

function replaceAll(str, find, replace) {
  return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
}

var grapher = document.getElementById('visualization');
var equation = "x + y";
var maxSteps = 80;
var xStart = -20;
var xEnd = 20;
var yStart = -20;
var yEnd = 20;
var steps = 20;
var graphWidth = (window.innerWidth * 0.4).toString() + 'px';
var graphHeight = (window.innerHeight * 1).toString() + 'px';

function calc1Var(equation, x) {
  equation = replaceAll(equation, "x", x);
  var result = math.eval(equation);
  console.log(equation + " = " + result);
  return result;
}

function calc2Var(equation, x, y) {
  equation = replaceAll(equation, "x", x);
  equation = replaceAll(equation, "y", y);
  var result = math.eval(equation);
  //    console.log(equation + " = " + result);
  return result;
}

function graph2D(equation, startX, endX) {
  //    var data = new vis.DataSet();
  //    var steps = 20; // number of datapoints will be steps*steps
  //    var axisMax = endX;
  //    var axisStep = axisMax / steps;
  //    var x;
  //    var y;
  //    for (x = 0; x < axisMax; x += axisStep) {
  //        y = calc1Var(equation, x);
  //        if (y != Infinity && y !=.........完整代码请登录后点击上方下载按钮下载查看