bumbeishvili / org-chart

Highly customizable org chart. Integrations available for Angular, React, Vue
https://stackblitz.com/edit/web-platform-o5t1ha
MIT License
913 stars 323 forks source link

Handing container size change? #327

Open ajmas opened 11 months ago

ajmas commented 11 months ago

I am using Vue and I am wanting to deal with a window size be changed. Right now if I start with a smaller window and it gets sized larger the chart is clipped per the original size.

If have add a windows.addEventListener('resize', onResize), with onResize() code being:

  this.chart
    .container(this.$refs.svgElementContainer)
  .render();

So far, while the function is called this doesn't change the container size. I'll Explore a little more, but I couldn't see anything int he docs or past issues.

Oh, and my chart is created as follows:

renderChart (data: any[]) {
  if (!this.chart) {
  this.chart = new OrgChart();
  }
  if (this.chart) {
  this.chart.layout('top');

  this.chart
    .container(this.$refs.svgElementContainer) // node or css selector
    .data(data)
    .nodeHeight(() => 120)
    .childrenMargin(() => 90)
    .compactMarginBetween(() => 65)
    .compactMarginPair(() => 100)
    // .neightbourMargin(() => 50)
    .siblingsMargin(() => 100)
    .nodeContent(this.renderNode.bind(this))
    .onNodeClick((d3Node: any) => this.onNodeClick(d3Node))
    .render();
  }
},

D3 Org Chart version is 3.1.1.

bumbeishvili commented 11 months ago

Container size should be automatically changing, it's just chart stays in place

https://stackblitz.com/edit/js-rvwpza?file=index.html