Question

我最初的问题：

我正在使用react-vega，并在css网格中放置一些vega图表。目前，如果我缩小图表的宽度开始重叠，那我会想随着浏览器窗口变窄（理想情况下为min-width）来动态调整图表的大小，这看起来太可怕了。我发现了一些对containerSize()的引用，但是还没有找到任何实现它的好例子。 vega的最佳选择是什么？ [发布到Vega松弛频道]

在与“ Kanit Wongsuphasawat”和“ Rob Wollen”来回往复之后，现在似乎没有一个很好的方法可以将其整合到vega或vega-react中，我已经尝试了以下方法，但是仍然存在问题。

我的方法：

我尝试使用react-measure npm package并在下面构建了一个react组件：

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（这是我在组件逻辑中写下的最大值）不断增加的数值，然后进行重置。如果我删除条件逻辑，它将永远持续增长。

理想情况下，我想修复此问题，以使其不会持续增长，并且在我调整浏览器大小时会缩小，但是我希望对这个问题有任何帮助或替代解决方案。

谢谢

Answer 1

所以我设法弄清楚了。

当我使用以下样式将以上组件封装在css网格中时：

<html>
	<head>
		<script src="https://d3js.org/d3.v4.min.js"></script>
		<script src="https://d3js.org/d3-path.v1.min.js"></script>
		<script src="https://d3js.org/d3-shape.v1.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<style>
			body{
				height: 100%;
				width: 100%;
				/*background-image: url("Computer.png");*/
			}
			p{
				float:left;
			}
		</style>
	</head>
	<!-- <img src=Computer.png width="70%" height="100%"> -->
	<p id="chart1"></p>
	<p id="chart2"></p>

	<body >

	</body>
</html>

由于没有将className应用于.parent-container{ display: grid; grid-template-areas: '. el1 . el2 .'; grid-template-columns: 10% 30% 20% 30% 10%; grid-auto-rows: 200px; }块，我需要在组件中添加一个额外的div，有关更新的返回信息，请参见下文。注意，现在我可以删除Vega图表在尺寸上的额外绑定逻辑：

<Measure>

如何动态调整Vega图表的大小以适应CSS网格

1 个答案: