Vis.JS Graph3d：如何获取画布/上下文？

问题描述

我想向 vis.js Graph3D 对象添加一些文本（实际上是一个计数器）。是否有首选/支持的方式来获取画布和/或上下文？我找不到任何文档，所以我只是检查了浏览器中的元素，直到找到 canvas。

目前我正在做的是以下工作，但我只是想知道是否有一些更强大的方法。

  var container = document.getElementById('mygraph');
  graph3d = new vis.Graph3d(container,data,options);
  canvas = graph3d.containerElement.firstChild.canvas; // not sure if this is supported but it works
  ctx = canvas.getContext('2d');

...然后我继续使用上下文绘制一些 fillText，包括安排 cameraPositionChange 事件以重新绘制文本。

这是一个完整的最小示例 JSfiddle，我在其中绘制了一些点，然后在顶部添加了一些文本：

http://jsfiddle.net/e7y2ha30/22/

HTML：<div id="mygraph"></div>

JavaScript：

 var dataDict = [];
 for (i=0; i<100; ++i) {
    x = Math.random();
    y = Math.random();
    z = Math.random();
    dataDict.push({id:i,x:x,y:y,z:z,style:0});
 }
data = new vis.DataSet();
data.add(dataDict)

var options = { // graph options
  width:  '300px',height: '300px',style: 'dot-color',showPerspective: true,showGrid: true,keepAspectRatio: true};

  var container = document.getElementById('mygraph');
  graph3d = new vis.Graph3d(container,options);
  canvas = graph3d.containerElement.firstChild.canvas; // not sure if this is supported but it works
  ctx = canvas.getContext('2d');

function drawText() {
  ctx.fillStyle = 'black'; 
  ctx.font = '16px sans-serif';
  ctx.fillText('Is this ok?',150,70); // some string I want to write
}
drawText();

graph3d.on('cameraPositionChange',drawText);

那么...有没有比抓取 containerElement.firstChild / 我的方式更好（推荐/支持/更强大）的方法来获取上下文（甚至只是以其他方式向图表添加文本）我在做吗？谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

canvas javascript vis.js