vis.js Graph3d Bar graph- Possible Bug?

问题

I am using the vis.js Graph3d library to plot 3D graphs with my data. Let's say the X-axis represent my nodes, Y-axis represent the last 5 hours and Z-axis represent the value. There can be hours when there are no readings for a node which I want to be represented as empty spaces. This works as expected if the first node has data for all the hours and the consequent nodes have data missing for some hours.

This example fiddle demonstrates it considering only 2 nodes.

Now if the first node is missing data, the rendering get's screwed up with bars overlapping each other while rotating the graph.

This fiddle demonstrates the same. The same is embedded to the post.

The weird part if that if you modify the data population and instead of skipping the data for the 2nd hour, skip it for any other hour, the graph renders perfectly. For example this fiddle.

Could someone tell me what's happening here?

I have made a temporary workaround by having an extra dummy node in the beginning where all values for the z-axis are set to 0. Would be glad if someone suggests a fix instead.

Thanks in advance.

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>

回答1:

Posting the answer I got from the developer.

If not configured, Graph3d automatically detects the bar width based on the distance between the first and second bar. You can configure the bar width manually:

var options = {
  xBarWidth: 1, 
  yBarWidth: 1,
  // ...
}

回答2:

I'm happy to report that this issue was fixed in vis.js v4.19.1.

If no explicit bar width and/or height are specified, these values will now default to the smallest distance (per dimension) between the data points. So, all the data points are considered, not just the first two.

In addition, the data points do not need to be sorted any more to determine the initial values.

来源：https://stackoverflow.com/questions/35459664/vis-js-graph3d-bar-graph-possible-bug

标签

javascript

jquery

graph

vis.js