neo4j-contrib / neovis.js

Neo4j + vis.js = neovis.js. Graph visualizations in the browser with data from Neo4j.
Apache License 2.0
1.59k stars 324 forks source link

How to show the ralationships information #336

Closed liliComing closed 1 year ago

liliComing commented 1 year ago

this is the part of my code. did not show after render, and please tell me how to show the arrow.

 relationships: {
                // i think this is the name of ralationships type in neo4j?
                belong_to: {
                    value:"weight" // what that means a name or a measure value
                },
                classified_as: {

                },
            },
XinyeYang commented 1 year ago

Have a try like this:

relationships: {
    Name1: {
        [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
            static: {
                label: "Text on edge", 
                color: "#ffffff",
                font: {
                    "background": "none",
                    "strokeWidth": "0",
                    "size": edgeFontSize,
                    "color": "#f9dc73"
                }
            }
        }
    },
    Name2: {
        [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
            static: {
                label: "Text on edge",
                color: "#64b687",
                font: {
                    "background": "none",
                    "strokeWidth": "0",
                    "size": edgeFontSize,
                    "color": "#437ce5"
                }
            }
        }
    }
}
liliComing commented 1 year ago

Have a try like this:

relationships: {
    Name1: {
        [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
            static: {
                label: "Text on edge", 
                color: "#ffffff",
                font: {
                    "background": "none",
                    "strokeWidth": "0",
                    "size": edgeFontSize,
                    "color": "#f9dc73"
                }
            }
        }
    },
    Name2: {
        [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
            static: {
                label: "Text on edge",
                color: "#64b687",
                font: {
                    "background": "none",
                    "strokeWidth": "0",
                    "size": edgeFontSize,
                    "color": "#437ce5"
                }
            }
        }
    }
}

Yeah, it works nicely,thanks for your help.And wish re-edit the doc because it is too abstract.

jocskywalker commented 1 year ago

I create a Vue Component using the below code ,nodes shown but relationship information doesn't shown in my graph ,

<script>
import NeoVis from '../dist/neovis.js';

export default {
    data() {
        return {
            cypher: "MATCH (n) -[r:exchange]->(m)  RETURN n,r,m",
        };
    },
    mounted() {
        this.draw();
    },

    methods:{
        draw() {
            let config = {
                containerId: "viz",
                neo4j: {
                    serverUrl: "bolt://localhost:7687",
                    serverUser: "yj",
                    serverPassword: "1845844"
                },
                labels: {
                    Stocks: {
                        label: "name",
                        // caption:"name",
                        value: "Cocode",
                        group: "industry",
                        [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
                            function: {
                                title: (node) => this.viz.nodeToHtml(node, [
                                    "name",
                                    "Cocode",
                                    "industry"
                                ])
                            }
                        }
                    },
                    GuPiao: {
                        label: "name",
                        // caption:"name",
                        [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
                            function: {
                                title: (node) => this.viz.nodeToHtml(node, [
                                    "name"
                                ])
                            }
                        }
                    },
                    SecuritiesExchange:{
                        label:"name",
                        // caption:"name",
                        [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
                            function: {
                                title: (node) => this.viz.nodeToHtml(node, [
                                    "name"
                                ])
                            }
                        }
                    }
                },
                relationships: {
                    exchange: {
                        [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
                            static: {
                                label: "name",
                                color: "#1fff11",
                                font: {
                                    "background": "none",
                                    "strokeWidth": "0",
                                    "size": 26,
                                    "color": "#f9dc73"
                                }
                            }
                        }
                        // label:"证券交易所"
                        // thickness:1
                    }
                },
                arrows:true,
                // hierarchical: true,
                initialCypher: this.cypher
            };

            this.viz = new NeoVis(config);
            this.viz.render();

        },
        runCypher() {
            if (this.cypher.trim().length > 3) {
                this.viz.renderWithCypher(this.cypher);
            } else {
                console.log('reload');
                this.viz.reload();
            }
        }
        // stabilizeGraph() {
        //     this.viz.stabilize();
        // }
    }
};
</script>

When I move the cursor over NeoVis.NEOVIS_ADVANCED_CONFIG ,it logs: Unresolved variable NEOVIS_ADVANCED_CONFIG, I don't know why

thebestnom commented 1 year ago

@jocskywalker please open a new discussion, I don't understand what you're trying to accomplish and what the current behavior