[Bug] Links still exists after collapse the node on Tree with large data

[matmust]

Version

5.3.3

Link to Minimal Reproduction

https://codesandbox.io/s/echarts-tree-with-large-data-10elmq?file=/src/chart.js

Steps to Reproduce

Here is how i create chart:

import { init, getInstanceByDom } from "echarts";
import React, { useRef, useEffect } from "react";

export function ReactECharts({ option, style, settings, theme }) {
  const chartRef = useRef(null);

  useEffect(() => {
    // Initialize chart
    let chart;
    if (chartRef.current !== null) {
      chart = init(chartRef.current, theme);
    }

    // Add chart resize listener
    // ResizeObserver is leading to a bit janky UX
    function resizeChart() {
      chart?.resize();
    }

    window.addEventListener("resize", resizeChart);

    // Return cleanup function
    return () => {
      chart?.dispose();
      window.removeEventListener("resize", resizeChart);
    };
  });

  useEffect(() => {
    // Update chart
    if (chartRef.current !== null) {
      const chart = getInstanceByDom(chartRef.current);
      chart.setOption(option, settings);
    }
  }, [option, settings, theme]); // Whenever theme changes we need to add option and setting due to it being deleted in cleanup function

  return (
    <div
      ref={chartRef}
      style={{ width: "100%", minHeight: "500px", ...style }}
    />
  );
}

Here is the option:

const treeOption = {
    tooltip: {
      trigger: "item",
      triggerOn: "mousemove",
      formatter: (d) => {
        return d.name;
      }
    },
    series: [
      {
        type: "tree",
        data: td,
        top: "1%",
        left: "7%",
        bottom: "1%",
        right: "20%",
        initialTreeDepth: 1,
        symbolSize: 8,
        label: {
          position: "left",
          verticalAlign: "middle",
          align: "right",
          fontSize: 9
        },
        leaves: {
          label: {
            position: "right",
            verticalAlign: "middle",
            align: "left"
          }
        },
        emphasis: {
          focus: "descendant"
        },
        expandAndCollapse: true,
        animationDuration: 550,
        animationDurationUpdate: 750
      }
    ]
  };

• Expand the node then collapse.

Current Behavior

Expanded the one of nodes and then collapsed. Links still exists for that node after collapse.

Expected Behavior

Expanded the one of nodes and then collapse. Links should not be exists for that node after collapse.

Environment

- OS: macOS Monterey (M1)
- Browser: Chrome 101.0.4951.64 (Official Build) (arm64)
- Framework: React@17.0.1 , React@18

Any additional comments?

No response

[xuxuxusong]

I had the same problem, but a lower version seems to work, 4.9.0

[Petri-Oosthuizen]

Interestingly, if you turn animations on and set the animationThreshold high enough (higher than the number of nodes) the links disappear as expected.

[helgasoft]

confirmed bug in v.5.4.1
Parameters animation or animationThreshold does not seem to affect it in any way. Demo Code - collapse any node and its children edges remain, do not get deleted. One condition is top to have more than 10 children. Another is the bottom nodes to be uniform (same number of children).

[helgasoft]

@Petri-Oosthuizen, you were right about animationThreshold.
However, it has to be way bigger than the number of nodes. My code has 780 (13*10*3*2) nodes and animationThreshold:3000 works, but animationThreshold:2000 does not.

[linghaoSu]

I am trying to fix this issue in this pr

@Petri-Oosthuizen, you were right about animationThreshold. However, it has to be way bigger than the number of nodes. My code has 780 (13103*2) nodes and animationThreshold:3000 works, but animationThreshold:2000 does not.

[asad-albadi]

Hi all am still facing the same issue, any news on when this will be fixed ?