在Neo4j可视化中将中心节点着色为红色,将其他节点着色为蓝色

1zmg4dgp  于 2023-06-29  发布在  其他
关注(0)|答案(1)|浏览(207)

我正在使用NeoVis库进行Neo4j可视化,并试图实现特定的节点着色行为。我希望中心节点的颜色为红色,而所有其他节点应着色为蓝色。然而,我目前的实现似乎并没有像预期的那样工作。
我已经尝试过更改renderNode函数来实现所需的节点着色。然而,它似乎并没有像预期的那样工作。所有节点最终都具有相同的背景颜色,而不是中心节点为红色,其他节点为蓝色。
有人能帮我找出问题并提出解决方案吗?我将非常感谢对这个问题的任何指导或见解。
下面是相关的代码片段:

function drawNeo4jViz(pageNumber, documentTitle, container_id) {
    console.log('Draw a chart!')

    var serverUrl;

    if (window.location.hostname === '***') {
        serverUrl = "***"
    } else if (window.location.hostname === '***') {
        serverUrl = "***"
    } else if (window.location.hostname === 'localhost') {
        serverUrl = "bolt://localhost:7687";
    } else {
        // Default case
        serverUrl = "bolt://localhost:7687";
    }

    var config = {
        containerId: container_id,
        neo4j: {
            serverUrl: serverUrl,
            serverUser: "***",
            serverPassword: "***",
        },
        labels: {
            Node: {
                label: "name",
                group: "layer",
                style: {
                    'text-overflow': 'ellipsis',
                    'overflow': 'hidden',
                    'white-space': 'nowrap',
                    'max-width': '100px' // Adjust the value as needed
                }
            },
        },
        relationships: {
            'LINKS_TO': {
                [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
                    static: {
                        label: "Links to",
                        color: "#34ff8b"
                    }
                },
            },
        },
        layout: {
            hierarchical: false, // or true if hierarchical layout is desired
            avoidOverlap: true // Enable avoidOverlap
        },
        initialCypher: `MATCH (n:Node)
        WHERE n.full_document_title STARTS WITH '${documentTitle}'
        AND n.full_document_title ENDS WITH 'Page: ${pageNumber}'
        OPTIONAL MATCH (n)-[r:LINKS_TO]->(m:Node)
        RETURN n, r, m`
    };

    console.log('Neo4j config set')
    var viz = new NeoVis.default(config);

    // Override the node display name
    viz.renderNode = function (node, container) {
        var name = node.properties['name'];
        var title = node.properties['full_document_title'];
        var label = this._options.labels[node.labels[0]].label;
        var group = this._options.labels[node.labels[0]].group;
        var size = this._options.labels[node.labels[0]].size;

        var wrapper = document.createElement('div');
        wrapper.classList.add('node');

        var labelElement = document.createElement('div');
        labelElement.classList.add('label');
        labelElement.innerText = name;

        var titleElement = document.createElement('div');
        titleElement.classList.add('title');
        titleElement.innerText = title;

        wrapper.appendChild(labelElement);
        wrapper.appendChild(titleElement);
        container.appendChild(wrapper);

        // Highlight the matched node in red
        if (node.properties['full_document_title'].endsWith('Page: ' + pageNumber)) {
            wrapper.style.backgroundColor = 'red';
        } else {
            wrapper.style.backgroundColor = 'blue';
        }
        
    };

    console.log('Neo4j vis render')
    viz.render();
    console.log(viz);
}
7rtdyuoh

7rtdyuoh1#

变量pageNumber没有给内部函数,因此它是未定义的,并且您对内部节点的检查将不起作用。

相关问题