Neo4j Neovis.js未在Salesforce Lightning Web组件中完全呈现

我花了大约一个星期的时间在这上面，网上几乎没有文档，所以我想我会来这里看看是否有人可以提供帮助。因此，最重要的总结是，我试图使用外部库（neovis.js）在Salesforce Lightning web组件中可视化neo4j图形数据库。我已经探索过d3.js（它与Salesforces locker服务兼容）和其他一些可视化库，但neovis.js将是我的用例中最可行的选项。我对下面的代码做了一些轻微的修改，以避免在neovis.js库中使用Document.getElementById来选择元素并将画布附加到页面

但是，一旦画布绘制到页面，屏幕上就不会显示任何画布元素（节点和边）。这里是奇怪的部分，我仍然可以悬停在画布上的节点应该在哪里，屏幕上会出现一个弹出窗口，显示每个节点的特定信息，其中包含每个节点的正确信息。我对canvas元素的工作原理并不十分熟悉，但在我看来，似乎由于Salesforce的locker服务，某些css属性没有被应用，这导致元素以不可见的方式呈现

我已经浏览了neovis.js库的大部分内容（它只是在vis.js之上构建的一个库），并且我寻找了一些可能没有将样式应用于canvas元素的地方；但是到目前为止我还没有运气

以下是我迄今为止使用的代码：

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>

以下是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>

许可证：

抄送3.0


标识符：
内政部：1324


名称：
肺癌


来源：
疾病本体论


网址：
http://purl.obolibrary.org/obo/DOID_1324

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

总而言之，我对canvas元素的实际功能不是很熟悉，我希望有人能给我一些提示，告诉我如何解决这个问题，并让canvas上的元素显示出来

---

谢谢大家!

我终于能够弄明白这一点，以防其他人遇到类似的问题。我不会说这是首选答案，但它（目前）是有效的。基本上，我向Salesforce中注入了一个

iframe

，在iframe内部，我注入了neovis.js库并生成了图形，现在效果非常好

<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>