org-chart
org-chart copied to clipboard
Handing container size change?
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.
Container size should be automatically changing, it's just chart stays in place
https://stackblitz.com/edit/js-rvwpza?file=index.html