数据不适合 VEGA 树形布局图

Data not properly fit on VEGA tree layout chart

我用过

https://cdn.jsdelivr.net/npm/vega@4.0.0-rc.2 https://cdn.jsdelivr.net/npm/vega-embed@3.0.0

我在 json 数组中总共有 1500 个数据。 为了 1级:1 2 级:20 3 级:1479

渲染时未显示 properly.because 它不适合 window。那么有没有办法在渲染后获得实际大小以及其他任何显示方式?

要显示 VEGA 树形布局图,如果数据非常大,然后它们会相互重叠,我们必须根据要传递的数据量设置足够的宽度和高度。为此,我们需要在解析图表时计算宽度和高度,因此我们需要提前计算它。

如何提前计算: 首先我们需要看看我们是否有1000条数据,然后它消耗了多少宽度和高度,

例如,宽度:500px 和高度:500px 才能正确显示 1000 个数据。 使逻辑随着数据的增加或减少而增加宽度和高度 假设我们有 1500 个数据然后数据增加 500 然后

       1000  =>  500px
       1500  =>  ?

       ? = 1500 * 500 / 1000 = 750px

这是动态设置宽度和高度的一种可能方法,希望对您有所帮助。