角度6 d3可折叠树仅在数据更改时更新文本

时间:2019-08-30 09:01:12

标签: angular d3.js

这是我正在使用的代码,当前正在加载树形图,但是我想要的是当数据更改时,树形图必须使用ngonchange方法重新呈现数据。

ngOnInit() {


        // Assigns parent, children, height, depth
        this.root = d3.hierarchy(this.treeData[0], function (d: any) {
          return d.children;
        });
        this.root.x0 = this.height / 2;
        this.root.y0 = 0;

        //this.root.children.forEach(this.collapse);
        this.root.children.forEach(() => {
          this.collapse;
        });
        this.updateChart(this.root);
      }

updateChart(source) {

    // Collapse after the second level

    // Assigns the x and y position for the nodes
    this.treeDataFor = this.treemap(this.root);

    // Compute the new tree layout.
    var nodes = this.treeDataFor.descendants(),
      links = this.treeDataFor.descendants().slice(1);  

    this.nodeEnter.append('text')
      .attr('x', (d: any) => d.children || d._children ? 13 : 13)
      .attr('y', (d: any) => d.children || d._children ? 30 : 30)
      .attr('class', 'treeVal')
      .attr('dy', (d: any) => d.children || d._children ? '6em' : '3em')
      .attr('dx', (d: any) => d.children || d._children ? '4em' : '6.8em')
      .attr('text-anchor', (d: any) => d.children || d._children ? 'inherit' : 'end')
      .attr('font-size', (d: any) => d.children || d._children ? '22px' : '14px')
      .attr('font-weight', (d: any) => d.children || d._children ? 'bolder' : 'bolder')
      .text((d: any) => d.children || d._children ? d.data.value + ' ' + 'KW' : d.data.value + ' ' + 'KW');      
  }

在这种情况下,如何在每次数据更改时使用ngOnChanges并更新树形图? 我想在数据更改时更新文本节点。 有人可以帮忙吗?预先感谢

0 个答案:

没有答案