vis.js Graph3d条形图 - 可能的Bug？ [英] vis.js Graph3d Bar graph- Possible Bug?
问题描述
我使用vis.js Graph3d库以我的数据绘制3D图形。假设X轴表示我的节点，Y轴表示最后5小时，Z轴表示值。对于我想表示为空格的节点，没有读数可能会有几个小时。如果第一个节点具有所有小时的数据并且随后的节点在数小时内丢失了数据，则这可以按预期工作。
现在，如果第一个节点缺失数据，在旋转图表时，渲染得到的结果会彼此重叠。
这个小提琴演示相同。如果你修改了数据填充，而不是跳过第二个小时的数据，那么跳过其他任何其他的数据小时，图形完美呈现。例如这个小提琴。
有人可以告诉我这里发生了什么？
我已经做了一个临时的解决方法，在z轴的所有值都设置为0的情况下，有一个额外的虚拟节点。如果有人提出修复方案，我们很高兴。
预先致谢。
var data = null; var graph = null; / ** *返回min（包含）与max（exclusive）之间的随机数* / function getRandomArbitrary（min，max）{return Math.random（）*（max - min）+ min; } //在Visualization API加载时调用。函数drawVisualization（）{var style ='bar'; //创建并填充数据表。 data = new vis.DataSet（）; //弹出（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}）; } //指定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％'，//选项tooltip可以是true，false或返回带有HTML内容的字符串的函数// tooltip：true，tooltip：function（point）{/ /参数点包含属性x，y，z返回'值：< b>'+ point.z +'< / b>'; }，keepAspectRatio：true，verticalRatio：0.5}; var camera =图表？ graph.getCameraPosition（）：null; //创建我们的图var container = document.getElementById（'mygraph'）; graph = new vis.Graph3d（container，data，options）;如果（摄像头）graph.setCameraPosition（摄像头）; //恢复相机位置var pos = {horizontal：1.0，vertical：0.5，distance：2}; graph.setCameraPosition（POS）; } drawVisualization（）;
html，body {font：10pt宋体;填充：0;保证金：0;宽度：100％;身高：100％; } #mygraph {padding：0;保证金：0;宽度：100％;身高：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>< /脚本><身体GT; < div id =mygraph>< / div>< / body>
如果没有配置，Graph3d会自动检测条形图。
var options = {
xBarWidth：1，
yBarWidth： 1，
// ...
}
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>
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,
// ...
}
这篇关于vis.js Graph3d条形图 - 可能的Bug？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
