How to replace the entire tree? about vue.d3.tree HOT 12 OPEN

@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

from vue.d3.tree.

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

from vue.d3.tree.

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

from vue.d3.tree.

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

from vue.d3.tree.

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;
    }

from vue.d3.tree.

@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;
    }, });

from vue.d3.tree.

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"}]
        }]
      }

from vue.d3.tree.

@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.

from vue.d3.tree.

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

from vue.d3.tree.

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

from vue.d3.tree.

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.

from vue.d3.tree.

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.

from vue.d3.tree.