Nothing displayed

[carrbrpoa]

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!

[David-Desmaisons]

Try to set a hight:

.tree {
        height: 600px;
        width: 100%;
    }

[curtisdelicata]

I am having the same issue. Did you find out how to get it working?

Edit: Searching the page for grandson does list three entries. Maybe it is the styling on my application.

[qianbi]

I have the same problem; Through debug, I found that without setting Marginx, the transform attribute of svg>g was "translate(206,20)". When Marginx:0 is set, the transform attribute of svg>g is "translate(06,20)".

[curtisdelicata]

All I see in Vue console is emitted events with the payload. Nothing is rendered.

[curtisdelicata]

I tried adding margin-x and margin-y but didn't help?

[curtisdelicata]

With some help, I got this working. The tree component doesn't show the text for one out of four labels but it renders fine.

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

[snoop244]

I'm not clear on how to get the op's code to work. I'm having the same problem: is not visible on the page, though it shows in Vue DevTools Components.

[David-Desmaisons]

@qianbi and @curtisdelicata I just released a 3.5.1 version where I fix a bug when zoomable was false that may be the same as the one you describe. Please let me know if it solve the problem if not cfreate a webpackbin so I can investigate.