Axis label rendered by LaTeX

61 views

Skip to first unread message

phkw...@gmail.com

unread,

Sep 17, 2018, 3:04:38 PM9/17/18

to MathBox

Hi,

I would like to label the x-axis and the graph of a function which I am plotting, but I am at loss on how to do that. A preliminary version of the code is shown below, but I'm missing the actual "labelling" part. At the moment I only manage to insert one label "..." somewhere but I can't control where it will land. It is essential that the labelling can be done with LaTeX, i.e. the function is \phi, hence I would like the label to show just that, rendered by katex.

I have looked at the dom-latex example, but I couldn't transfer the functionality to my setting.

What I would like to have is the following:

At (1.5, 0.1) (position see blue dot) I would like to write "x" as a label for the x axis
At (1, 1) (position see blue dot) I would like to write "\phi(x)", rendered with LaTeX

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>MathBox - Empty</title>
  <script src="../mathbox-bundle.js"></script>
  <link rel="stylesheet" href="../build/mathbox.css">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
</head>
<body>
  <script>

      // Define global DOM handler to format 'latex' into an HTML span
    MathBox.DOM.Types.latex = MathBox.DOM.createClass({
      render: function (el) {
        this.props.innerHTML = katex.renderToString(this.children);
        return el('span', this.props);
      }
    });
    var mathbox = mathBox({
      plugins: ['core', 'controls', 'cursor', 'mathbox'],
      controls: {
        // Orbit controls, i.e. Euler angles, with gimbal lock
        klass: THREE.OrbitControls,

        // Trackball controls, i.e. Free quaternion rotation
        //klass: THREE.TrackballControls,
      },
    });
    if (mathbox.fallback) throw "WebGL not supported"

    var three = mathbox.three;
    three.renderer.setClearColor(new THREE.Color(0xFFFFFF), 1.0);



    // Do stuff with mathbox,
    // for example: (see docs/intro.md)
    
    var camera = mathbox.camera({
        proxy: true,
        position: [0, 0, 3],
        });

    var view = mathbox.cartesian({
        range: [[-0.5, 1.5], [-0.1, 1]],
        scale: [2.0, 1.5],
        });
   

    view.array({
      data: [[1.5,0.1], [1,1]],
      channels: 2, // necessary
      live: false,
    })
    view
    .point({
      color: 0x3090FF,
      size: 40,
    })
    view.html({
      width: 1,
      height: 1,
      depth:  1,
      expr: function (emit, i, j, k, l) {
        // Emit latex element
        emit("...") ///////////////////////////////////////////////////////////////////// This is the missing part
        //emit(el('latex', null, 'c =1'));
      },
    })
    .dom({
      snap: false,
      offset: [0, 0],
      size: 24,
      zoom: 1,
      outline: 3,
    });
    
    view
        .axis({
            axis: 1,
            width: 3,
        })
        .axis({
            axis: 2,
            width: 3,
        })
        .grid({
            width: 1,  
            divideX: 11,
            divideY: 16,        
        });

        var scale =
  view.scale({
    divide: 3,
  });

  var ticks =
  view.ticks({
    width: 5,
    size: 15,
    color: 'black',
  });

  var format =
  view.format({
    digits: 2,
    weight: 'bold',
  });

  var labels =
  view.label({
    color: 'black',
    zIndex: 1,
  });
    var data =
        view.interval({
            expr: function (emit, x, i, t) {
            emit(x, x*x/(x+1)+0.2);
            },
            width: 64,
            channels: 2,
        });
    var curve =
        view.line({
            width: 5,
            color: '#3090FF',
        });
  

    
  </script>
</body>
</html>

Behzad Vafaeian

unread,

Dec 22, 2020, 9:41:36 AM12/22/20

to MathBox

Hi,

Did any one manage to find an answer to this question?

Thanks

Reply all

Reply to author

Forward

0 new messages