vis.js Graph3d 条形图 - 可能的错误

vis.js Graph3d Bar graph- Possible Bug?

本文关键字：错误 js Graph3d 条形图 vis      更新时间：2023-09-26

我正在使用vis.js Graph3d库用我的数据绘制3D图形。假设 X 轴表示我的节点，Y 轴表示过去 5 小时，Z 轴表示值。可能有几个小时没有我想表示为空白的节点的读数。如果第一个节点具有所有小时的数据，而后续节点在几个小时内缺少数据，则此操作将按预期工作。

此示例小提琴演示了它仅考虑 2 个节点。

现在，如果第一个节点缺少数据，则在旋转图形时，渲染会因条相互重叠而搞砸。

这把小提琴也展示了同样的情况。同样嵌入到帖子中。

奇怪的是，如果您修改数据填充而不是跳过第 2 小时的数据，而是跳过任何其他小时的数据，图形将完美呈现。比如这个小提琴。

有人可以告诉我这里发生了什么吗？

我做了一个临时解决方法，在开始时有一个额外的虚拟节点，其中 z 轴的所有值都设置为 0。如果有人建议修复，会很高兴。

提前谢谢。

var data = null;
    var graph = null;
	/**
	 * Returns a random number between min (inclusive) and max (exclusive)
	 */
	function getRandomArbitrary(min, max) {
		return Math.random() * (max - min) + min;
	}
	
    // Called when the Visualization API is loaded.
    function drawVisualization() {
      var style = 'bar';
      // Create and populate a data table.
      data = new vis.DataSet();
	  
	  //Poppulating the data
      for (var y = 1; y <= 5; y++) {
        if(y==2) {
          continue;
        }
        var z = getRandomArbitrary(1,5);
        data.add({x:1, y:y, z:z});
      }
      for (var y = 1; y <= 5; y++) {
        var z = getRandomArbitrary(1,5);
        data.add({x:2, y:y, z:z});
      }
      // specify options
      var options = {
        width:  '700px',
        height: '700px',
        style: style,
        showPerspective: true,
        showGrid: true,
        showShadow: false,
				verticalRatio: 0.5,
				zMin: 0,
				zMax: 5,
				xStep: 1,
				xCenter: '50%',
        yCenter: '30%',
        // Option tooltip can be true, false, or a function returning a string with HTML contents
        //tooltip: true,
        tooltip: function (point) {
          // parameter point contains properties x, y, z
          return 'value: <b>' + point.z + '</b>';
        },
        keepAspectRatio: true,
        verticalRatio: 0.5
      };
      var camera = graph ? graph.getCameraPosition() : null;
      // create our graph
      var container = document.getElementById('mygraph');
      graph = new vis.Graph3d(container, data, options);
      if (camera) graph.setCameraPosition(camera); // restore camera position
	  
	  var pos = {horizontal: 1.0, vertical: 0.5, distance: 2};
      graph.setCameraPosition(pos);
    }
drawVisualization();
html, body {font: 10pt arial;
	  padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
	  }
	
	#mygraph {
	  padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vis/3.6.4/vis.min.js">
</script>
<body>
  <div id="mygraph"></div>
</body>

我很高兴

地报告此问题已在vis.js v4.19.1中修复。

如果未指定显式条形宽度和/或高度，则这些值现在将默认为数据点之间的最小距离(每个维度(。因此，所有数据点都被考虑在内，而不仅仅是前两个。

此外，不再需要对数据点进行排序来确定初始值。

发布我从开发人员那里得到的答案。

如果未配置，Graph3d 将根据第一根和第二根柱之间的距离自动检测条形宽度。您可以手动配置条形宽度：

var options = {
  xBarWidth: 1, 
  yBarWidth: 1,
  // ...
}
相关文章：