Question

我花了大约一个星期左右的时间，而且在线文档很少，所以我想来这里看看是否有人可以提供帮助。因此，最顶层的摘要是我正在尝试使用外部库（neovis.js）来可视化Salesforce Lightning Web组件中的neo4j图形数据库。我已经研究了d3.js（与Salesforces储物柜服务兼容）和其他一些可视化库，但是neovis.js将是我的用例中最可行的选择。为了避免使用neovis.js库中的Document.getElementById选择元素并将画布附加到页面，我对下面的代码进行了一些小的修改。

但是，一旦将画布绘制到页面上，屏幕上就不会显示任何画布元素（节点和边缘）。不过，这是一个很奇怪的部分，我仍然可以将鼠标悬停在画布上节点的位置上，并在屏幕上显示显示每个节点的特定信息的弹出窗口，并显示每个节点的正确信息。我对canvas元素的工作方式并不十分熟悉，但是在我看来，似乎由于Salesforce的更衣室服务而未应用某些css属性，这会导致元素以不可见的方式呈现。

我已经浏览了neovis.js库的大部分内容（这只是基于vis.js构建的库），并且我一直在寻找可能未在画布上应用样式的地方元件;但是到目前为止，我还没有运气。

这是我到目前为止使用的代码：

index.html

<template>
    <lightning-card title="Neovis" icon-name="custom:custom19">
        <div class="slds-m-around_medium">
            <div id="neovisContainerViz" class="neoVizClass" lwc:dom="manual" style="height: 700px; width: 400px;">
            </div>
        </div>
    </lightning-card>
</template>

index.js

drawNeovis() {


        const config = {
            container_id: "",
            server_url: "bolt://neo4j.het.io:7687", //This is a publicly available neo4j database that I'm using for testing purposes. 
            server_user: "",
            server_password: "",
            labels: {

            },
            relationships: {

            },
            initial_cypher: "MATCH (node:Disease {name: 'lung cancer'}) RETURN node"
        }

        const parent = this.template.querySelector('div.neoVizClass');
        const container = document.createElement('DIV');
        container.className = 'neoViz';
        parent.appendChild(container);

        const viz = new NeoVis.default(config);
        viz._container = container; //This is a property inside of the NeoVis library. This property is normally set by using the document.getElementById method, however I've replaced it with my predefined container to get around the Salesforce Locker Service.
        viz.render();
    }

这正是在Salesforce应用页面上呈现的内容：

<div class="slds-card__body">
    <slot>
        <div class="slds-m-around_medium">
            <div id="neovisContainerViz-67" class="neoVizClass" style="height: 700px; width: 400px;">
                <div class="neovis">
                    <div class="vis-network" tabindex="900" style="position: relative; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; height: 100%;">
                        <canvas width="200" height="200" style="position: relative; touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; height: 100%;">

                        </canvas>
                        <div class="vis-tooltip" style="left: 5px; top: 5px; visibility: hidden;">
                            <strong>
                                license:
                            </strong> 
                            CC BY 3.0
                            <br>
                            <strong>identifier:</strong> 
                            DOID:1324
                            <br>
                            <strong>name:</strong> 
                            lung cancer
                            <br>
                            <strong>source:</strong> 
                            Disease Ontology
                            <br>
                            <strong>url:</strong> 
                            http://purl.obolibrary.org/obo/DOID_1324
                            <br>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </slot>
</div>

画布和工具提示被附加到DOM，并且当我将鼠标悬停在画布元素的显示位置时，工具提示会动态更新。但是，在屏幕上看不到任何节点或边缘。

总而言之，我对canvas元素的实际功能不是很熟悉，希望有人能给我一些技巧，以解决这个问题并在画布上显示这些元素。

谢谢大家！

Answer 1

我终于能够弄清楚这一点，以防其他人遇到类似问题。我不会说这是首选答案，但是（目前）有效。基本上，我将iframe注入了Salesforce，并且在iframe的内部注入了neovis.js库并生成了图形，现在可以正常使用了。

Neovis.js无法在Salesforce Lightning Web组件中完全呈现

1 个答案: