david-desmaisons / vue.d3.tree Goto Github PK

Hi
i know a previous ticket was opened about this, but was close without explanation.
I have the same issue.
i'm using yarn.

Hello David, i got an error, "Transition is not a function", when i used your library in my project. How to fix this? Thanks

Hi !

I tried to install and use your component today in my application.
I copy pasted the example provided in the README, and the result was ... quite surprising.

In fact the generated tree kept growing in size and become bigger and bigger !
There was no way to stop him.

I made a video, if that helps you understand the situation:
https://drive.google.com/file/d/1OTzopXsKPNuztpMzi07iGbHpUOvbT4GC/view?usp=sharing

Thanks !

hi david ,
i have use he command "npm install vued3tree" and import {tree} from 'vued3tree' in my project(iwant to embed this tree js to my program)
but the componnet can't identify the tree , could you help me how to resolve this error ?

Can you write in the documentation how to include your script when someone wants to use a CDN?

I user news npm install.
I am look at ReadMe, this is nothing error to help me. Please check this error by my file.
MyFile by this http://47.100.21.2/My.vue
console error : http://47.100.21.2/error.png

Hi, i'm trying to add a prop to influence .treeclass .nodetree text

The way i'm trying to do this is via a computed value and prop. But I can't find where the HTML is defined to add the v-bind:style. Where would I find the template or how would you go about this?

On the demo, change the radius of the node doesn't take effect reactively (new radius only updated when the tree is collapsed then expanded.

And when the radius is large (like 10 in the demo), it covered the Text, are there anyway to adjust the spacing between the node and text.

I have now got this to render and it looks nice but one node doesn't show the text. The other three do. Below is my code and attached is a link.

https://github.com/modularsoftware/genealogy/blob/master/resources/assets/js/pages/trees/Show.vue

Hello,

Tried to display a tree with sample data. I see the svg element is sized, but nothing is displayed. Code:

<template>
    <div>
        <tree class="tree" :identifier="getId" :node-text="text" :data="treeData" :type="'tree'" :duration="5" :margin-y="150"> </tree>
    </div>
</template>
<script>
    import { tree } from 'vued3tree';

    export default {
        components: {
            tree
        },
        data() {
            return {
                text: 'text',
                treeData: {
                    id: 1,
                    text: 'father',
                    children: [
                        {
                            id: 2,
                            text: 'son1',
                            children: [
                                { id: 4, text: 'grandson' },
                                { id: 5, text: 'grandson2' }
                            ]
                        },
                        {
                            id: 3,
                            text: 'son2',
                            children: [
                                { id: 6, name: 'grandson3' },
                                { id: 7, text: 'grandson4' }
                            ]
                        }
                    ]
                }
            };
        },
        methods: {
            getId(node) {
                return node.id;
            }
        }
    };
</script>

<style scoped>
    .tree {
        max-height: 600px;
        width: 100%;
    }
</style>

Any ideas? Thanks!

Hi David, I am trying to use behaviors but that is not possible importing from the library.

import { tree, popUpOnTextHover} from "vued3tree";

console.log(popUpOnTextHover) //undefined

@David-Desmaisons thank you for vue d3 tree. I would like to know how I can open the list, first, after receiving it from the server (json)? That is, when you click on 1 node.

Example JSON:

One node:

[{
  "id": 1,
  "first_name": "Freddie",
  "last_name": "Readhead",
  "count_friends": 9
}, {
  "id": 2,
  "first_name": "Cyndi",
  "last_name": "Sampson",
  "count_friends": 12
}, {
  "id": 3,
  "first_name": "Jan",
  "last_name": "Ferney",
  "count_friends": 19
}, {
  "id": 4,
  "first_name": "Dita",
  "last_name": "Grut",
  "count_friends": 15
}, {
  "id": 5,
  "first_name": "Mar",
  "last_name": "Abry",
  "count_friends": 21
}]

Next node:

[{
  "id": 1,
  "first_name": "Flo",
  "last_name": "Janu",
  "count_friends": 3
}, {
  "id": 2,
  "first_name": "Ardelia",
  "last_name": "Heijne",
  "count_friends": 5
}, {
  "id": 3,
  "first_name": "Wrennie",
  "last_name": "Luipold",
  "count_friends": 2
}]

And other...

How can i do this?

Hi David,
by default the D3 tree seems to sort the nodes based on textlength(?).
In some situations this behavior is not really usefull.
Can it be deactivated or overwritten within configuration of the component?

Best regards
Alex

Hello David
i got an error in source code after npm install and npm run dev.
thank you

(unknown) TypeError: selection.interrupt is not a function
at zoom.transform (eval at (bundle.js:1598), :159:17)
at Selection.selection_call [as call] (eval at (bundle.js:1550), :338:12)
at VueComponent.mounted (eval at (bundle.js:1164), :167:13)
at callHook (eval at (bundle.js:744), :2917:21)
at Object.insert (eval at (bundle.js:744), :4154:7)
at invokeInsertHook (eval at (bundle.js:744), :5956:28)
at Vue.patch [as patch] (eval at (bundle.js:744), :6175:5)
at Vue._update (eval at (bundle.js:744), :2656:19)
at Vue.updateComponent (eval at (bundle.js:744), :2784:10)
at Watcher.get (eval at (bundle.js:744), :3138:25)

I want to add a custom class to a specific element so I can dynamically toggle classes.

E.g.

<path class="link node--source" :class={"text-success: foo, text-danger: bar"}>

Is this possible? If so, how?

Kind regards and thanks for creating this awesome component!

The readme says that zoomable is defaulted to true but that seems incorrect?

https://github.com/David-Desmaisons/Vue.D3.tree/blob/master/src/Tree.vue#L61

• thanks a bunch for this component!

只让节点放大，线条不放大

Hi @David-Desmaisons,

I think there is one last issue in your README's example:

<tree :data="tree" :node-text="name" layoutType="circular">
</tree>

If i use this, i get the following result:

The names are not displayed.
However, if I remove the v-bind on the :node-text prop:

<tree :data="tree" node-text="name" layoutType="circular">
</tree>

The names are displayed !
I'm a real beginner with VueJS, so i don't know what is the underlying issue.

Can you confirm ?

I'm looking to make the font size larger as it's quite small at the moment but couldn't see an option for it.

Layout is broken. Nodes click/expand functionality is broken.

Getting next errors:

TypeError: Cannot read property 'layoutInfo' of null
at SVGGElement. (index.js:2)
at SVGGElement. (tween.js:75)
at Transition.each (each.js:5)
at tweenValue (tween.js:73)
at Transition.attr (attr.js:71)
at VueComponent.updateGraph (index.js:2)
at VueComponent.updateIfNeeded (index.js:2)
at VueComponent.collapse (index.js:2)
at VueComponent.toggleExpandCollapse (index.js:2)
at VueComponent.nodes.clickedNode (index.js:1)

2) ` [Vue warn]: Error in nextTick: "TypeError: Cannot read property 'layoutInfo' of null"`

Hi David, are you planning to add support install package for yarn?

Hi @David-Desmaisons ,

I was wondering how it could be possible to insert new nodes dynamically (fetched from an external resource, like a GraphQL endpoint), when the root node is being clicked.

So far, I tried the following:

    <tree :data="tree" node-text="name" class="tree" v-on:clicked="onClicked">
    </tree>

  methods: {
    onClicked: function (event) {
      alert('Bonjour ' + this.tree.name + ' !')
      var child = {
        name: 'child01'
      }
      event.data.children.push(child)
    }
  }

And the data is indeed updated:

And reflected on the Component tree attribute:

-> So Is it a simple refresh problem ?
-> Can I use your component to insert dynamical data into it, or should i gather all the data from the beginning ?

Thanks David !

Hello David, i haven't started using your plugin yet but it looks fantastic. Do you have a live demo i can see in action?

Eventually i would love to use this to create a company structure that is dynamic based on people's job titles and hierarchy.

Hi

Exists any form that we can edit styles on the tree component. For instance, I would like to change the color of each node, font size, line colors, etc.

Do you have any recommendation?

The key code is the same as the example.but the chat always going down.

<tree :data="d3treeData" node-text="name" layoutType="circular"></tree>

data: () => {
       d3treeData: {
            name: "father",
            children:[{
            name: "son1",
            children:[ {name: "grandson"}, {name: "grandson2"}]
            },{
            name: "son2",
            children:[ {name: "grandson3"}, {name: "grandson4"}]
            }]
        },
}

Hello, David.
Thanks for your nice tree.
i want to make more than one link for leaf nodes in component.
for example, b is a leaf node . root node a links b , root node c links b too.
i tried to add links in data.json like:
links:[
{
"source": a.id,
"target": b.id,
"value": 1
},
{
"source": c.id,
"target": b.id,
"value": 1
}
]
but it didn't work, can you help me ? thanks for any suggestion

Hello David, I am going to use your plugin, but I am getting an error when using the demo you provided?

My code：

<template>
  <div>
    <tree class="tree" :data="tree" node-text="name" layoutType="circular"/>
  </div>
</template>

<script>
import { tree } from 'vued3tree'
export default {
  name: 'QsTags',
  components: {
    tree
  },
  data () {
    return {
      tree: {
        name: 'father',
        children: [
          {
            name: 'son1',
            children: [ { name: 'grandson' }, { name: 'grandson2' } ]
          }, {
            name: 'son2',
            children: [ { name: 'grandson3' }, { name: 'grandson4' } ]
          }
        ]
      }
    }
  }
}
</script>

<style lang="stylus">
.tree
  width 600px
  height 600px
</style>

Error message：

[Vue warn]: Error in mounted hook: "TypeError: h.transition is not a function"
found in
---> <D3Tree>
......

vue version: 2.5.17
vue-cli version: 3.0.0

hello David.
How to change the color of lines linked with a specified node in the tree component?
just like Hierarchical Edge Bundling component , when the mouse move on a node , the lines color changed. i want the same effect in tree component.
thanks for any suggestions.

Can I make a graph with more than one parent node using Vue D3 Tree?

set zoomable = false , then the whole graph is gone
i tried this in the source code got the same effect.

this component is dependency on bootstrap css, when someone using element ui css, it is conflict, consider using the component without bootstrap?

Steps to reproduce

take tree example demo
compile it with newest vue version.
See a blank page with no warnings.

Versions

webpack 2.6.1
vue 2.4.2
[email protected]
vuetify 0.15.3
Firefox 55.0.3
win 7

In my program string

import {tree} from 'vued3tree'

causes a blank page with no warnings after recompiling.

Using sources in programs changes nothing. All dependencies in Tree.vue are resolved correctly.
But can not import Tree.vue or vued3tree correctly.

i use this configs, and make one div that limits the max-height, but the problem continues. Could you help me?
<d3tree :data="animal.genealogia" :type="tree" :layout-type="euclidean" :duration="5" :margin-y="150" :zoomable="false"> </d3tree>

Why does slot node is not working ?
Is there any wrong in my code?

<tree :data="tree" style="height: 100vh" @clickedText="showDetails"> <div slot="node" slot-scope="data">{{data.name}}: {{data.gender}}</div> </tree>

Is it possible to create something like this: http://bl.ocks.org/d3noob/8324872 using this library?
It seems it's not but I might be wrong, if not I think it makes sense to include it a future feature.

Is there an easy workaround to create vertical layout?

Do you have any detail examples

Hi,

I cannot add data dynamically to the graph. For instance I use the component like <tree id="tree" ref="tree" :data="treeData" node-text="name" layoutType="horizontal"></tree>. Data/methods look like:

[...]
data() {
  return {
      treeData: {
        name: 'foo',
        children: [],
      },
    };
  },
methods: {
  onUpdate() {
    console.log('on update');
    const newData = {
      children: [],
      name: 'foo',
    };
    this.$data.treeData.children.push(newData);
  },
},
[...]

When triggering onUpdate, I get the following error in Chrome:

vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'x' of undefined
    at e (index.js?74cc:1)
    at SVGPathElement.eval (index.js?74cc:2)
    at SVGPathElement.eval (attr.js?f872:29)
    at Selection.eval [as each] (each.js?cefe:5)
    at Selection.eval [as attr] (attr.js?f872:53)
    at VueComponent.updateGraph (index.js?74cc:2)
    at VueComponent.eval (index.js?74cc:2)
    at Array.eval (vue.runtime.esm.js?2b0e:1980)
    at flushCallbacks (vue.runtime.esm.js?2b0e:1906)

Vue version is 2.6.10, Vue.D3.tree version is 5.1.0.

Hi,

I write this code. when the tree is defined hardcoded it works greate but when getting the tree data from the server the svg high and width is 0
I attach example for the code:

example.vue.txt

Thanks,

my tree renders very slow. after flush page , it will cost 1-2s to render.
Do you know why?

render finish:

Hello! I need to show the collapsed tree from the second level onwards. I found this function of d3 in an example that does what I need:

root.children.forEach (collapse);

(Link: https://bl.ocks.org/d3noob/43a860bc0024792f8803bba8ca0d5ecd)
Is there a particular function in vued3tree to be able to show the tree the way I need it?
Thank you!

Hello I'm trying to use your library to draw a tree of 9.2k+ nodes, this is what I think could be improved:

• nodes tends to overlap when they are many and the container is small: I believe nodes are positioned relative to the canvas size, it would be better if nodes could have some fixed spacing, or at least zoom the graphics, not names.
  
• nodes are all open by default: it would be nice to set a max number of open nodes (1000 would be a good default) or read an open:false on the nodes to decide if children should be drawn

thank you

Hello, sir. I have an idea. Can you display both text and pictures on the node?

Hi, I have to do some actions in each node, like remove/rename node, actually is it possible to add contextmenu?

Hi David, thanks a lot for your excellent work. I built a parse tree and it was beautiful. However, I can not display more texts. For example, I have a data like this:

tree: {
        name: 'father',
        age: '70',
        children: [{
          name: 'son1',
          age: '50',
          children: [{name: 'grandson', age: '20'}, {name: 'grandson2', age: '21'}]
        }, {
          name: 'son2',
          age: '49',
          children: [{name: 'grandson3', age: '22'}, {name: 'grandson4', age: '23'}]
        }]
     }

, and I want to display not only 'name' but also 'age' as nodeText. It is not possible. Could you provide me a solution? It would be greatly appriciate.

It seems the current version has the subject error.

Hi @David-Desmaisons ,

Thanks to your latest update, I was able to display my filesystem with your component:

However, these modifications brought new issues in the display:

• when i click on a node, and add my children nodes dynamically, the entire tree is being redrawned.
  It's a bit confusing in terms of display. Is there a way to only expand the node I have just clicked instead ?
• since the entire tree is being redrawned, it doesn't save the collapsed nodes state, and all the nodes which were previously expanded are displayed again.

You can find more details in the following video:
https://drive.google.com/file/d/10OqXoBLWu0foB8Qf6Zz5cEERVEGf0vWF/view?usp=sharing

Thank you

Hi David, I need to update the tree dynamically and required to use the "identifier" according to the documentation, could you please give me more explanation about it? Thanks a lot !!!

Been trying to generate a tree style that looks like this where only the path with children gets colored red

I'm trying to use this example of slot node to color the path but I am unable to isolate the paths that have children. Also how do I access the d path coordinates that is generated?