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

Question

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

但是，一旦 canvas 被绘制到页面上，canvas 元素（节点和边）中的 none 就会显示在屏幕上。不过，这是奇怪的部分，我仍然可以将鼠标悬停在节点应该在 canvas 上的位置上，并且显示每个节点的特定信息的弹出窗口出现在屏幕上，其中包含每个节点的正确信息。我不太熟悉 canvas 元素的工作原理，但在我看来，由于 Salesforce 的储物柜服务，某些 css 属性未被应用，这导致元素成为呈现无形。

我浏览了 neovis.js 库的大部分内容（它只是一个建立在 vis.js 之上的库），我寻找了可能没有样式的地方' t 应用于 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>

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>

canvas 和工具提示附加到 DOM，并且当我将鼠标悬停在应显示 canvas 元素的位置时，工具提示会动态更新。但是 none 的节点或边在屏幕上可见。

总而言之，我对 canvas 元素的实际功能不是很熟悉，希望有人能给我一些提示，以解决此问题并获取 canvas 显示。

谢谢大家！

Answer 1

我终于能够解决这个问题，以防其他人运行陷入类似的问题。我不会说这是首选答案，但它有效（目前）。基本上我在 Salesforce 中注入了一个 iframe，在 iframe 中我注入了 neovis.js 库并生成了图表，现在工作得很好。

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

Neovis.js not rendering completely in Salesforce Lightning Web Component

salesforce

neo4j

vis.js

salesforce-lightning