How to replace the entire tree?

[sunh11373]

Is it possible to replace the entire tree?

If I do it naively as below:

<template>
<tree  :data="myTree" ....>

<script>
...resplaceTree() {
       this.myTree = <newTree>

I got similar error:

client.js:96 TypeError: Cannot read property 'x' of undefined
    at e (index.js:1)
    at SVGPathElement.<anonymous> (index.js:2)
    at SVGPathElement.<anonymous> (attr.js:29)
    at Selection.each (each.js:5)
    at Selection.attr (attr.js:53)
    at VueComponent.updateGraph (index.js:2)
    at VueComponent.<anonymous> (index.js:2)
    at Array.<anonymous> (vue.runtime.esm.js:1980)
    at flushCallbacks (vue.runtime.esm.js:1906)

Btw, if myTree is initially null, it works.

-thanks

[Joun-lee]

@sunh11373 Hi, Please have a look at the closed issue #54. Use the prop identifier can solve your problem.

[sunh11373]

Not sure how this can be resolved with "prop identifier". I need to replace the tree with a total different set of data with different number of nodes.

-thanks

[NoAbdulrahman]

Hi @sunh11373 @Joun-lee Did you solve the problem? If yes, could you please tell me how to do? I have a similar problem and I don't understand how to solve it with the props identifier

[Joun-lee]

Hi, @NoAbdulrahman You can try my code below, see if it can solve your problem.

The html part

        <tree
          :data="currentRegionTree" 
          :duration="200"
          node-text="name"
          :identifier="getId" //this is a function defined in your 'methods' section
          layoutType="horizontal"
          type="tree"
          :zoomable="true"
          linkLayout="orthogonal"
        ></tree>

In the methods section of your vue component

   getId(node) {
      return node.id;
    }

[NoAbdulrahman]

@Joun-lee Thanks, I used the identifier, I have no error now, but the tree is still not displayed. I don't know if I'm missing something. Here is my code if you could have a look.
The html part:

<tree :data="tree"  :identifier="getId"  node-text="title"  layoutType="horizontal"
       type="tree"   Duration="0"  style="width:600px; height:600px" ...>
</tree>

The script:

export default Vue.extend({
  name: "Products",
  components: {
       tree,
  },
  data() {    
      return {     
             tree:{}
    };},
async created(){
         const products = await this.FetchedData();
         this.tree=products;
  console.log(this.tree);
},
methods: {
      async FetchedData(){
        let response = await Service.getProducts()
        let products = response.data.data;
        products=  JSON.stringify(products);
        return products
       },
       getId(node) {
       return node.id;
    }, });

[Joun-lee]

Hi, @NoAbdulrahman Not sure why, but i would suggest you first check the 'tree' value, does it comply with the rule? Might use some simple static data firstly to check that, for example use the data below

tree: {
        name: "father",
        children:[{
          name: "son1",
          children:[ {name: "grandson"}, {name: "grandson2"}]
        },{
          name: "son2",
          children:[ {name: "grandson3"}, {name: "grandson4"}]
        }]
      }

[NoAbdulrahman]

@Joun-lee Thanks for your reply. The tree is displayed very well when I use my data as static, but it is not displayed when I try to fetch the same data from the API. The "console.log" in created() prints the data which means the data is fetched correctly, but I don't know why the tree is not displayed.

[NoAbdulrahman]

Hi @David-Desmaisons , Do you have an idea about my issue above?

[Joun-lee]

Hi @NoAbdulrahman , usually I fetch data in the mounted function, maybe you can try do it in your mounted function.

[David-Desmaisons]

Using mount or created should not make any diference.
@NoAbdulrahman From waht you are describing nothing I can do. Try to check the example and apdat them.
It looks like something related on the data you are using not the component itself.

[NoAbdulrahman]

My problem is solved by adding v-if=“dataLoaded” on the tree component and set the dataLoaded property to true loading the data. Also, I had to use json object instead of json string.

[horikx]

@NoAbdulrahman I have the same problem. It renders the first time but when I completely change the dataset I get the same error. If the Vue component is destroyed then recreated it works, but you can't just change the data. I did this by applying a key to the tree and changing it everytime the dataset changed