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

Question

我花了大约一周的时间来做这件事，网上的文档很少，所以我想我来这里看看是否有人可以帮上忙。所以最高级别的总结是，我正在尝试使用一个外部库(neovis.js)来可视化Salesforce Lightning web组件中的neo4j图形数据库。我已经研究过d3.js (它与Salesforce储物柜服务兼容)和其他一些可视化库，但对于我的用例来说，neovis.js将是最可行的选择。我在下面的代码中做了一些细微的修改，以避免在neovis.js库中使用Document.getElementById来选择元素并将画布附加到页面。

但是，一旦画布绘制到页面上，任何画布元素(节点和边)都不会显示在屏幕上。但奇怪的是，我仍然可以将鼠标悬停在画布上节点的位置上，屏幕上会出现显示每个节点的特定信息的弹出窗口，其中包含每个节点的正确信息。我不太熟悉canvas元素是如何工作的，但在我看来，似乎因为Salesforce的locker服务而没有应用某些css属性，这会导致to元素不可见地呈现。

我已经浏览了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>

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中，当我将鼠标悬停在画布元素应该显示的位置时，工具提示会动态更新。但是，屏幕上看不到任何节点或边。

总而言之，我不太熟悉画布元素是如何工作的，我希望有人能给我一些提示，告诉我如何解决这个问题，并让画布上的元素显示出来。

谢谢大家！

Answer 1

我终于能够弄清楚这一点，以防其他人遇到类似的问题。我不会说这是首选的答案，但它(目前)是有效的。基本上，我向Salesforce注入了一个iframe，在iframe内部，我注入了neovis.js库并生成了图形，现在可以完美地工作了。