css - 如何动态调整 vega 图表的大小以适应 CSS 网格
问题描述
我最初的问题:
我正在使用react-vega
并在 CSS 网格中放置一些 vega 图表。如果我缩小图表开始重叠的宽度,我想动态调整图表的大小,因为浏览器窗口变窄(理想情况下是 a min-width
),这看起来很糟糕。我找到了一些参考资料,containerSize()
但没有找到任何关于如何实现它的好例子。vega 的最佳选择是什么?[发布到 vega slack 频道]
在与“Kanit Wongsuphasawat”和“Rob Wollen”来回折腾之后,现在似乎没有一个很好的方法可以将其合并到 vega 或 vega-react 中,我尝试了以下方法但仍然有问题。
我的方法:
我尝试使用react-measure
npm 包并在下面构建了一个反应组件:
import Measure from 'react-measure';
import React, { Component } from 'react';
import NetworkUpDownChart from './vega-network-updown-chart';
import Vega from 'react-vega';
export default class ItemToMeasure extends Component {
state = {
dimensions: {
width: -1,
height: -1,
},
}
data = {
table: [
{"x": 0, "y": 28, "c":0}, {"x": 0, "y": -55, "c":1}
...
]
};
spec = {
"$schema": "https://vega.github.io/schema/vega/v4.json",
"width": 900,
"height": 200,
"padding": 5,
"autosize": {
"type": "pad",
"resize": true,
},
"data": [
{
"name": "table",
// data will be passed in via props
"transform": [
{
"type": "stack",
"groupby": ["x"],
"sort": {"field": "c"},
"field": "y"
}
]
}
],
"scales": [
{
"name": "x",
"type": "point",
"range": "width",
"domain": {"data": "table", "field": "x"}
},
{
"name": "y",
"type": "linear",
"range": "height",
"nice": true, "zero": true,
"domain": {"data": "table", "field": "y1"}
},
{
"name": "color",
"type": "ordinal",
"range": "category",
"domain": {"data": "table", "field": "c"}
}
],
"axes": [
{"orient": "bottom", "scale": "x", "zindex": 1},
{"orient": "left", "scale": "y", "zindex": 1}
],
"marks": [
{
"type": "group",
"from": {
"facet": {
"name": "series",
"data": "table",
"groupby": "c"
}
},
"marks": [
{
"type": "area",
"from": {"data": "series"},
"encode": {
"enter": {
"interpolate": {"value": "monotone"},
"x": {"scale": "x", "field": "x"},
"y": {"scale": "y", "field": "y0"},
"y2": {"scale": "y", "field": "y1"},
"fill": {"scale": "color", "field": "c"}
},
"update": {
"fillOpacity": {"value": 1}
},
"hover": {
"fillOpacity": {"value": 0.5}
}
}
}
]
}
]
}
render() {
const { width, height } = this.state.dimensions
// const className = classNames(width < 400 && 'small-width-modifier')
return (
<Measure
bounds
onResize={contentRect => {
this.setState({ dimensions: contentRect.bounds })
}}
>
{({ measureRef }) => (
<div ref={measureRef}>
{width < 250 && (
<Vega width={width} spec={this.spec} data={this.data}/>,
<NetworkUpDownChart width={width} data={this.data}> . </NetworkUpDownChart>)}
<pre>{measureRef}</pre>
</div>
)}
</Measure>
)
}
}
当我使用该组件时,它“动态调整图形大小”而不是在调整浏览器窗口大小时。相反,它只是不断地从 0 -> 250 增长(这是我在组件逻辑中记下的最大值作为最大值)然后重置。如果我删除那里的条件逻辑,它只会继续永远增长。
理想情况下,我想解决这个问题,这样它就不会持续增长,并且在我调整浏览器大小时会缩小,但我将不胜感激任何帮助或解决这个问题的替代方案。
谢谢
解决方案
所以我设法弄清楚了这一点。
当我使用这种样式将上述组件封装在 css 网格中时:
.parent-container{
display: grid;
grid-template-areas:
'. el1 . el2 .';
grid-template-columns: 10% 30% 20% 30% 10%;
grid-auto-rows: 200px;
}
我需要在组件中添加一个额外的 div,因为 className 没有应用于<Measure>
块,请参阅下面的更新返回。注意我现在可以删除 Vega 图表大小的额外绑定逻辑:
return (
<div className="el2">
<Measure
bounds
onResize={contentRect => {
this.setState({ dimensions: contentRect.bounds })
}}
>
{({ measureRef }) => (
<div ref={measureRef}>
<NetworkUpDownChart width={width} data={this.data}></NetworkUpDownChart>
</div>
)}
</Measure>
</div>
)
}
推荐阅读
- python-3.x - 使用 Keras 的机器学习项目中常见的随机性来源是什么?
- css - 如何显示隐藏的对象
- data-mining - 顺序模式或项集 fp 树
- reactjs - 语义-ui-react 基本模态抛出不变违规:Portal.render()
- c++ - 如何在我的情况下使用测试框架?
- python - 在多标签分类中使用带有嵌入层的双向 LSTM 时出现维度错误
- angularjs - 新 AngularJS ng-ref 指令的缺陷
- wpf - 为什么有些文本会在 WPF 中消失,而有些则不会
- python - 部署 Python 脚本 PyInstaller 和 Flask
- python - pip:卸载一个 disutils 安装的包