【问题标题】:Reload ngx-graph with new data用新数据重新加载 ngx-graph
【发布时间】:2019-02-04 12:42:39
【问题描述】:

我正在尝试泳道 ngx-graph,在我的应用程序中用户可以删除或添加节点。根据删除或添加操作,我将相应地更新我的数据。

现在真正的问题是如何在不刷新整个页面的情况下刷新图表。

【问题讨论】:

    标签: javascript angular typescript ngx-graph


    【解决方案1】:

    您可以使用图表的update$ 选项对其进行更新,

    HTML:

    <ngx-graph
        . . . // Other options
        [update$]="update$"
        . . . 
    >
    

    TS:

    // Observable for update 
    update$: Subject<any> = new Subject();
    
    // Update function
    updateChart(){
        this.update$.next(true);
    }
    

    更新数据后,请致电updateChart()

    【讨论】:

    • 找不到名称“主题”。错误我错过了什么
    • @user8624282 你导入了吗? import { Subject } from 'rxjs';
    • 对我来说,this.update$.next(true);当我将新节点对象添加到节点数组时,会导致整个图形重绘。有没有办法将新节点对象添加到节点数组并让图形检测并将该新节点添加到渲染图形而不重绘整个图形?
    • @Craig 我不这么认为。他们需要重新绘制整个图形以调整节点和链接之间的间距。如果禁用此功能,如果您尝试添加内部节点,图表将变得混乱。
    • 几年前我使用了不同的力图 d3-force 我认为是。纯JS。它很高兴地允许将节点添加到图形视图中,而无需重新渲染。
    【解决方案2】:

    更改检测无法识别您尝试修改数据。

     this.data = updatedData;
    

    而是尝试传播数据,这将检测到更改。它对我有用。

     this.data = [...updatedData];
    

    【讨论】:

      【解决方案3】:

      对于使用 Thanan_Jajes 答案获得'Cannot assign to 'data' because it is an import.' 的人,以下内容对我有用:

      Object.assign(this, {data: [...data]});
      

      【讨论】:

        猜你喜欢
        • 2021-11-24
        • 2015-04-03
        • 2014-11-27
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-04-15
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多