个人中心
gpt4 book ai didi

javascript - SVG 顶部的 React 单选按钮组的高级定位和大小调整

转载 作者：技术小花猫 更新时间：2023-10-29 11:41:42 24 4
gpt4 key购买 nike

编辑:here is a link to my app当前正在显示我所指的问题。

我已尽力使帖子简洁透彻，但如果有点长，请提前致歉。不过，我认为长度是有帮助的。

我觉得这是一项具有挑战性的任务，涉及将 React 单选按钮组定位在显示图形的 SVG 之上。我创建了以下代码片段，其中包括两个组件(一个图形和一个容器组件)，以帮助突出我遇到的问题。

代替实际图表(散点图、条形图、w/e)，我只制作了一个包含 3 个彩色矩形的矩形 SVG。在 SVG 组件上，我还在右侧添加了 6 个黑框，用作使用 D3 直接构建到 SVG 上的单选按钮组。

由于各种状态原因(主要是因为我希望我的容器组件保存图形的状态，因为容器组件会有其他部分需要按钮值)，我正在构建一组 React单选按钮，以取代 D3 SVG 单选按钮，但我正在努力解决按钮的定位问题。鉴于我制作 SVG 的方式(使用 Viewbox)，直接构建在 SVG 上的 React 单选按钮随着浏览器窗口宽度的变化而重新缩放。这很重要，不是因为我网站的浏览者会主动更改浏览器窗口大小(他们不会)，而是因为我不知道用户浏览器的宽度，并且随着 SVG 大小的调整，按钮的大小意味着按钮总是看起来不错。

但是，React 单选按钮不会缩放。正如您在这里看到的:

<div style={{"width":"85%", "margin":"0 auto", "marginTop":"75px", "padding":"0", "position":"relative"}}>
  <div style={{"width":"450px", "position":"absolute", "bottom":"32px", "left":"20px", "zIndex":"1"}}>
      <h3>X-Axis Stat</h3>
      {xStatButtons}
  </div>

  <div style={{"position":"absolute", "top":"5px", "left":"8px", "zIndex":"1"}}>
      <h3>Y-Axis Stat</h3>
      {yStatButtons}
  </div>
</div>

我使用 position = absolute|relative 以及 top|bottom|left 样式来将按钮定位在 SVG 的顶部。我还更改了 react 单选按钮 div 上的 z-index，以便它们位于 SVG 之上。

在查看代码之前，请运行代码片段并打开全屏，并增加和减少浏览器窗口的宽度。

class GraphComponent extends React.Component {

	constructor(props) { 
		super(props);
    
		this.chartProps = {
			chartWidth: 400, // Dont Change These, For Viewbox 
			chartHeight: 200 // Dont Change These, For Viewbox 
		};
	}

  // Lifecycle Components
	componentDidMount() {
    
		const { chartHeight, chartWidth, svgID } = this.chartProps;
		d3.select('#d3graph')
			.attr('width', '100%')
			.attr('height', '100%')
			.attr('viewBox', "0 0 " + chartWidth + " " + chartHeight)
			.attr('preserveAspectRatio', "xMaxYMax");
    
    const fakeButtons = d3.select('g.fakeButtons')
    for(var i = 0; i < 6; i++) {
      fakeButtons
        .append('rect')
        .attr('x', 370)
        .attr('y', 15 + i*25)
        .attr('width', 25)
        .attr('height', 20)
        .attr('fill', 'black')
        .attr('opacity', 1)
        .attr('stroke', 'black')
        .attr('stroke-width', 2) 
    }
    
    d3.select('g.myRect')
      .append('rect')
        .attr('x', 0)
        .attr('y', 0)
        .attr('width', chartWidth)
        .attr('height', chartHeight)
        .attr('fill', 'red')
        .attr('opacity', 0.8)
        .attr('stroke', 'black')
        .attr('stroke-width', 5)
    
    d3.select('g.myRect')
      .append('rect')
        .attr('x', 35)
        .attr('y', 35)
        .attr('width', chartWidth - 70)
        .attr('height', chartHeight - 70)
        .attr('fill', 'blue')
        .attr('opacity', 0.8)
        .attr('stroke', 'black')
        .attr('stroke-width', 2)
    
    d3.select('g.myRect')
      .append('rect')
        .attr('x', 70)
        .attr('y', 70)
        .attr('width', chartWidth - 140)
        .attr('height', chartHeight - 140)
        .attr('fill', 'green')
        .attr('opacity', 0.8)
        .attr('stroke', 'black')
        .attr('stroke-width', 2)
	}
  
	render() {
 		return (
			<div ref="scatter">
				<svg id="d3graph">
          <g className="myRect" />
          <g className="fakeButtons" />
				</svg>
			</div>
		)
	}
}

class GraphContainer extends React.Component {

	constructor(props) { 
		super(props);
    this.state = {
      statNameX: "AtBats",
      statNameY: "Saves"
    }
	}

	render() {
    
    const { statNameX, statNameY } = this.state;
    const xStats = [
      { value: "GamesPlayed", label: "G" },
      { value: "AtBats", label: "AB" },
      { value: "Runs", label: "R" },
      { value: "Hits", label: "H" },
      { value: "SecondBaseHits", label: "2B" },
      { value: "ThirdBaseHits", label: "3B" },
      { value: "Homeruns", label: "HR" },
      { value: "RunsBattedIn", label: "RBI" }];
    const yStats = [
      { value: "Wins", label: "W" },
      { value: "Losses", label: "L" },
      { value: "EarnedRunAvg", label: "ERA" },
      { value: "GamesPlayed", label: "G" },
      { value: "GamesStarted", label: "GS" },
      { value: "Saves", label: "SV" },
      { value: "RunsAllowed", label: "R"}]; 
    
    const xStatButtons = 
          <form>
            <div className="qualify-radio-group scatter-group">
              {xStats.map((d, i) => {
                return (
                  <label key={'xstat-' + i}>
                    <input
                      type={"radio"}
                      value={xStats[i].value}
                    />
                    <span>{xStats[i].label}</span>
                  </label>
                )
              })}
            </div>
          </form>;
    
    const yStatButtons = 
          <form>
            <div className="qualify-radio-group scatter-group">
              {yStats.map((d, i) => {
                return (
                  <label  className="go-vert" key={'ystat-' + i}>
                    <input
                      type={"radio"}
                      value={yStats[i].value}
                    />
                    <span>{yStats[i].label}</span>
                  </label>
                )
              })}
            </div>
          </form>;
    
 		return (
			<div style={{"width":"85%", "margin":"0 auto", "marginTop":"75px", "padding":"0", "position":"relative"}}>
        
        <div style={{"width":"450px", "position":"absolute", "bottom":"32px", "left":"20px", "zIndex":"1"}}>
          <h3>X-Axis Stat</h3>
          {xStatButtons}
        </div>

        <div style={{"position":"absolute", "top":"5px", "left":"8px", "zIndex":"1"}}>
          <h3>Y-Axis Stat</h3>
          {yStatButtons}
        </div>
        
        <GraphComponent />
      </div>
		)
	}
}



ReactDOM.render(
  <GraphContainer />,
  document.getElementById('root')
);
.scatter-group input[type=radio] {
	visibility:hidden;
	width:0px;
	height:0px;
	overflow:hidden;
}

.scatter-group input[type=radio] + span {
	cursor: pointer;
	display: inline-block;
	vertical-align: top;
	line-height: 25px;
	padding: 2px 6px;
	border-radius: 2px;
	color: #333;
	background: #EEE;

	border-radius: 5px;
	border: 2px solid #333;

	margin-right: 2px;
}

.scatter-group input[type=radio]:not(:checked) + span {
	cursor: pointer;
	background-color: #EEE;
	color: #333;
}

.scatter-group input[type=radio]:not(:checked) + span:hover{
	cursor: pointer;
	background: #888;
}

.scatter-group input[type=radio]:checked + span{
	cursor: pointer;
	background-color: #333;
	color: #EEE;
}

.go-vert {
	display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>

<div id='root'>
  WORK
</div>

我的问题是:我如何使用 React 单选按钮正确调整大小和定位，以便它们的行为(从大小和定位的 Angular 来看)类似于构建单选按钮直接放入 SVG(黑框如何调整大小)？

在此感谢任何帮助。

最佳答案

您的里程可能会有所不同，但我建议尝试使用 vw 单位来调整单选按钮的大小。 1vw 等于视口(viewport)的 1%，可用于 font-size、padding 和 line-height单选按钮元素的属性。

提取我对您的示例所做的更改:

    .scatter-group input[type=radio] + span {
        font-size: calc(6px + 0.8vw);
        line-height: 1;
        padding: 0.8vw;
    }

首先，我结合了 calc 和 vw 以获得在小视口(viewport)上不低于 6px 的流畅字体大小。 line-height 影响按钮的整体高度，因此我将其重置为 1，这意味着它将是 font-size 的 100%。最后，我使用 vw 单元进行填充。您可以像以前一样使用相同的 calc 技巧对维度进行细粒度控制。

示例并不完美，需要进行一些调整才能使其在现实条件下与 SVG 相匹配。按钮容器也应该根据视口(viewport)进行调整，我没有触及那些，因为它不是问题范围。

vw 和 calc() 在所有主流浏览器中均受支持。

引用:
- https://www.sitepoint.com/css-viewport-units-quick-start/
- https://css-tricks.com/snippets/css/fluid-typography/
- https://www.smashingmagazine.com/2016/05/fluid-typography/ 

class GraphComponent extends React.Component {

	constructor(props) { 
		super(props);
    
		this.chartProps = {
			chartWidth: 400, // Dont Change These, For Viewbox 
			chartHeight: 200 // Dont Change These, For Viewbox 
		};
	}

  // Lifecycle Components
	componentDidMount() {
    
		const { chartHeight, chartWidth, svgID } = this.chartProps;
		d3.select('#d3graph')
			.attr('width', '100%')
			.attr('height', '100%')
			.attr('viewBox', "0 0 " + chartWidth + " " + chartHeight)
			.attr('preserveAspectRatio', "xMaxYMax");
    
    const fakeButtons = d3.select('g.fakeButtons')
    for(var i = 0; i < 6; i++) {
      fakeButtons
        .append('rect')
        .attr('x', 370)
        .attr('y', 15 + i*25)
        .attr('width', 25)
        .attr('height', 20)
        .attr('fill', 'black')
        .attr('opacity', 1)
        .attr('stroke', 'black')
        .attr('stroke-width', 2) 
    }
    
    d3.select('g.myRect')
      .append('rect')
        .attr('x', 0)
        .attr('y', 0)
        .attr('width', chartWidth)
        .attr('height', chartHeight)
        .attr('fill', 'red')
        .attr('opacity', 0.8)
        .attr('stroke', 'black')
        .attr('stroke-width', 5)
    
    d3.select('g.myRect')
      .append('rect')
        .attr('x', 35)
        .attr('y', 35)
        .attr('width', chartWidth - 70)
        .attr('height', chartHeight - 70)
        .attr('fill', 'blue')
        .attr('opacity', 0.8)
        .attr('stroke', 'black')
        .attr('stroke-width', 2)
    
    d3.select('g.myRect')
      .append('rect')
        .attr('x', 70)
        .attr('y', 70)
        .attr('width', chartWidth - 140)
        .attr('height', chartHeight - 140)
        .attr('fill', 'green')
        .attr('opacity', 0.8)
        .attr('stroke', 'black')
        .attr('stroke-width', 2)
	}
  
	render() {
 		return (
			<div ref="scatter">
				<svg id="d3graph">
          <g className="myRect" />
          <g className="fakeButtons" />
				</svg>
			</div>
		)
	}
}

class GraphContainer extends React.Component {

	constructor(props) { 
		super(props);
    this.state = {
      statNameX: "AtBats",
      statNameY: "Saves"
    }
	}

	render() {
    
    const { statNameX, statNameY } = this.state;
    const xStats = [
      { value: "GamesPlayed", label: "G" },
      { value: "AtBats", label: "AB" },
      { value: "Runs", label: "R" },
      { value: "Hits", label: "H" },
      { value: "SecondBaseHits", label: "2B" },
      { value: "ThirdBaseHits", label: "3B" },
      { value: "Homeruns", label: "HR" },
      { value: "RunsBattedIn", label: "RBI" }];
    const yStats = [
      { value: "Wins", label: "W" },
      { value: "Losses", label: "L" },
      { value: "EarnedRunAvg", label: "ERA" },
      { value: "GamesPlayed", label: "G" },
      { value: "GamesStarted", label: "GS" },
      { value: "Saves", label: "SV" },
      { value: "RunsAllowed", label: "R"}]; 
    
    const xStatButtons = 
          <form>
            <div className="qualify-radio-group scatter-group">
              {xStats.map((d, i) => {
                return (
                  <label key={'xstat-' + i}>
                    <input
                      type={"radio"}
                      value={xStats[i].value}
                    />
                    <span>{xStats[i].label}</span>
                  </label>
                )
              })}
            </div>
          </form>;
    
    const yStatButtons = 
          <form>
            <div className="qualify-radio-group scatter-group">
              {yStats.map((d, i) => {
                return (
                  <label  className="go-vert" key={'ystat-' + i}>
                    <input
                      type={"radio"}
                      value={yStats[i].value}
                    />
                    <span>{yStats[i].label}</span>
                  </label>
                )
              })}
            </div>
          </form>;
    
 		return (
			<div style={{"width":"85%", "margin":"0 auto", "marginTop":"75px", "padding":"0", "position":"relative"}}>
        
        <div style={{"width":"450px", "position":"absolute", "bottom":"32px", "left":"20px", "zIndex":"1"}}>
          <h3>X-Axis Stat</h3>
          {xStatButtons}
        </div>

        <div style={{"position":"absolute", "top":"5px", "left":"8px", "zIndex":"1"}}>
          <h3>Y-Axis Stat</h3>
          {yStatButtons}
        </div>
        
        <GraphComponent />
      </div>
		)
	}
}



ReactDOM.render(
  <GraphContainer />,
  document.getElementById('root')
);
.scatter-group input[type=radio] {
	visibility:hidden;
	width:0px;
	height:0px;
	overflow:hidden;
}

.scatter-group input[type=radio] + span {
	cursor: pointer;
	display: inline-block;
	vertical-align: top;
	line-height: 1;
	padding: 0.8vw;
    font-size: calc(6px + 0.8vw);
	border-radius: 2px;
	color: #333;
	background: #EEE;

	border-radius: 5px;
	border: 2px solid #333;

	margin-right: 2px;
}

.scatter-group input[type=radio]:not(:checked) + span {
	cursor: pointer;
	background-color: #EEE;
	color: #333;
}

.scatter-group input[type=radio]:not(:checked) + span:hover{
	cursor: pointer;
	background: #888;
}

.scatter-group input[type=radio]:checked + span{
	cursor: pointer;
	background-color: #333;
	color: #EEE;
}

.go-vert {
	display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>

<div id='root'>
  WORK
</div>

关于javascript - SVG 顶部的 React 单选按钮组的高级定位和大小调整，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50731444/

24 4 0
文章推荐： linux - 如何在 VI/VIM 编辑器中用不同的词替换查找词？
文章推荐： html - 如何使用 CSS 在表格中设置 cellpadding 和 cellspacing？
文章推荐： html - 强制 flex 元素跨越整个行宽
文章推荐： linux - 是否有 Linux 或 U-Boot 支持在启动时从芯片读取 MAC 地址？
技术小花猫
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com