Graph becomes crazy when zooming in or out #11024
Description
Version
4.2.1
Steps to reproduce
- Zoom in, see that some clusters are getting crazy
- Zoom out, inspect the same
- Roam around using the mouse and see that some nodes are forcibly moving
What is actually happening?
As you can see in the gif below, upon zooming using the mouse-wheel some parts of the graph are getting crazy and raving around. For example, notice the blue cluster next to the cursor.
What is expected?
I expect the graph to zoom in and out smoothly. I don't want any other movement in the graph upon zooming
More Details
When the graph is ready and stands still, my goal is to hide the node-labels from a specific zoom and then when a user zoom in, the labels will appear again. I used data zoom in order to hook the event of zooming and calculating the scale.
So ideally, I just want to hide the labels when zooming out too much and showing them when zooming in to a certain port.
Here is the configuration and the related JS function. The function itself isn't the problem, the problem is in the Options (tested by removing parts)
Options
This is the JS function responsible for showing\hiding the labels
myChart.on('dataZoom', function (params) {
var start = params.batch[0].start;
var end = params.batch[0].end;
if(myChart.getOption().series[0].zoom <= 0.3 && myChart.getOption().series[0].zoom != 1 && !isLabelsHidden)
{
myChart.setOption({series: [{label: {
show: false}}]});
isLabelsHidden = true;
} else if(myChart.getOption().series[0].zoom > 0.3 && myChart.getOption().series[0].zoom != 1 && isLabelsHidden)
{
myChart.setOption({series: [{label: {
show: true}}]});
isLabelsHidden = false;
}
});
myChart.on('dataZoom', function (params) {
var start = params.batch[0].start;
var end = params.batch[0].end;
if(myChart.getOption().series[0].zoom <= 0.3 && myChart.getOption().series[0].zoom != 1 && !isLabelsHidden)
{
myChart.setOption({series: [{label: {
show: false}}]});
isLabelsHidden = true;
} else if(myChart.getOption().series[0].zoom > 0.3 && myChart.getOption().series[0].zoom != 1 && isLabelsHidden)
{
myChart.setOption({series: [{label: {
show: true}}]});
isLabelsHidden = false;
}
});
And here are the options, configuration -- the problem happens only when adding "dataZoom", "xAxis" and "yAxis".
option = {
title: {
top: 'bottom',
left: 'right'
},
feature: {
magicType: {
type: ['line', 'bar', 'stack', 'tiled']
}
},
legend: [{
// selectedMode: 'single',
data: categories.map(function (a) {
return a.name;
})
}],
animation: true,
animationDuration: 1500,
scaleLimit : {
},
animationEasingUpdate: 'quinticInOut',
dataZoom: [
{
type: 'inside',
},
{
type: 'inside',
}
],
xAxis: {
show: false,
scale: true,
silent: true,
type: 'value'
},
yAxis: {
show: false,
scale: true,
silent: true,
type: 'value'
},
series : [
{
name: 'some name',
type: 'graph',
layout: 'force',
force: {
initLayout: 'circular',
edgeLength: 1200,
repulsion: 100000,
gravity: 0.4
},
zoom: 0.15,
data: graph.nodes,
links: graph.links,
categories: categories,
roam: true,
focusNodeAdjacency: true,
draggable: true,
itemStyle: {
normal: {
borderColor: '#fff',
borderWidth: 1,
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.3)'
}
},
label: {
position: 'outside',
show: true,
formatter: '{b}'
},
lineStyle: {
color: 'source',
curveness: 0,
width: 2
},
emphasis: {
lineStyle: {
width: 8
}
}
}
]
};