我花了大约一周左右的时间，网上的文档很少，所以我想我会来这里看看是否有人可以提供帮助。因此，顶级总结是，我正在尝试使用外部库(neovis.js)在Salesforce Lightning Web组件中可视化neo4j图形数据库。我已经探索了d3.js(与Salesforce储物柜服务兼容)和其他一些可视化库，但是neovis.js将是我的用例最可行的选择。我做了一些轻微的修改，如下面的代码所示，以避免在 neovis.js 库中使用 Document.getElementById 来选择元素并将画布附加到页面。
但是，一旦画布被绘制到页面，屏幕上就不会显示任何画布元素(节点和边缘)。不过，奇怪的是，我仍然可以将鼠标悬停在画布上节点的位置上，并且屏幕上会显示每个节点的特定信息的弹出窗口，其中包含每个节点的正确信息。我对 canvas 元素的工作原理不是很熟悉，但在我看来，由于 Salesforce 的储物柜服务，某些 css 属性没有被应用，这会导致元素被不可见地呈现。
我已经浏览了 neovis.js 库的很大一部分(这只是一个建立在 vis.js 之上的库)，并且我寻找了可能没有将样式应用于 canvas 元素的地方;但是到目前为止，我没有运气。
这是我到目前为止使用的代码：
索引.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>
索引.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 元素的实际功能不是很熟悉，希望有人能给我一些关于如何解决此问题并让画布上的元素显示的提示。
谢谢大家！
我终于能够解决这个问题，以防其他人遇到类似的问题。我不会说这是首选答案，但它(目前)有效。基本上，我在Salesforce中注入了一个iframe，在iframe内部，我注入了neovis.js库并生成了图形，现在运行良好。