我正在尝试使用 datamanager 在节点之间创建连接 但是当我指定 connectionDataSource 时,节点消失并且屏幕为空,控制台中没有错误
@Component({
selector: 'app-relationship-playground-component',
template: `<ejs-diagram id="diagram" width="100%" height="580px" [layout]='layout' [dataSourceSettings]='dataSourceSettings' [getNodeDefaults]='nodeDefaults' [getConnectorDefaults]='connectorDefaults'>
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class RelationshipPlaygroundComponentComponent implements OnInit{
@ViewChild("diagram") public layout?: LayoutModel;
public dataSourceSettings?: DataSourceModel;
public connections : Object[] = [
{
id: "a96b708d-9878-409b-9424-79afd536fbcb",
source: "e0ad8a67-65a4-488e-a13e-af4a51095da4",
target: "991d0d06-f084-43df-871d-2c501a41108e",
}
]
public elements : Object[] = [
{
caption: "Accom (sample)",
id: "e0ad8a67-65a4-488e-a13e-af4a51095da4",
recordId: "405947d0-2ffb-4ded-8675-0475f19f5a81",
},
{
caption: "Our company",
id: "991d0d06-f084-43df-871d-2c501a41108e",
recordId: "e308b781-3c5b-4ecb-89ef-5c1ed4da488e",
}
]
public nodeDefaults(node: NodeModel): NodeModel {
return node;
}
public connectorDefaults(connector: ConnectorModel): ConnectorModel {
connector.type = "Orthogonal";
connector.cornerRadius = 7;
return connector;
}
ngOnInit(): void {
this.layout = {
type: "HierarchicalTree", verticalSpacing: 40
};
this.dataSourceSettings = {
id: "id",
dataManager: new DataManager(this.elements as JSON[]),
connectionDataSource: {
id: 'id',
sourceID: 'source',
targetID: 'target',
dataManager: new DataManager(this.connections as JSON[])
}
};
}
}
我从文档和示例存储库中获取了示例 https://github.com/syncfusion/ej2-samples/blob/master/src/diagram/crud.ts
https://ej2.syncfusion.com/angular/documentation/diagram/data-binding#how-to-perform-editing-at-runtime
使用 DataManager 的分层树布局已呈现。在DataManager中,您需要分配一个带有Id和parentId的JSON对象,然后将这个DataManager分配给dataSourceSettings中的dataSource属性。布局是根据布局中定义的ID和parentId来渲染的。渲染布局时,无需设置connectionDataSource。
文档 https://ej2.syncfusion.com/angular/documentation/diagram/automatic-layout
样品 https://stackblitz.com/edit/angular-dzj1jr-87pxp8?file=src%2Fapp.component.html