分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了无法在 React 钩子中调整 d3 v6 的大小？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决无法在 React 钩子中调整 d3 v6 的大小？？

开发过程中遇到无法在 React 钩子中调整 d3 v6 的大小？的问题如何解决？下面主要结合日常开发的经验，给出你关于无法在 React 钩子中调整 d3 v6 的大小？的解决方法建议，希望对你解决无法在 React 钩子中调整 d3 v6 的大小？有所启发或帮助；

我正在尝试根据状态调整我的 svg 的宽度和高度：

  const [svgWIDth,setSvgWIDth] = useState(350);

  const [svgHeight,setSvgHeight] = useState(250);

  useEffect(() => {
    const svg = d3
      .SELEct("#epi-chart")
      .attr("wIDth",svgWIDth)
      .attr("height",svgHeight);

    const margin = { top: 0,right: 10,bottom: 10,left: 10 },wIDth = svgWIDth - margin.left - margin.right,height = svgHeight - margin.top - margin.bottom;

    const x = d3.scalelinear().rangeround([0,wIDth]);

    const y = d3.scaleBand().rangeround([0,height]).padding(0.4);

    const g = svg
      .append("g")
      .attr("transform","translate(" + margin.left + "," + margin.top + ")");

    x.domain([0,d3.max(mockData,(d) => number(d.col1)) as number]);

    y.domain(
      mockData.map(function (d) {
        return d.letter;
      })
    );

    g.SELEctAll(".bar")
      .data(mockData)
      .enter()
      .append("rect")
      .attr("fill","rgba(105,129,148,0.4)")
      .attr("class","bar1")
      .attr("x",0)
      .attr("y",(d) => y(d.letter) as number)
      .attr("wIDth",(d) => x(number(d.col1)))
      .attr("height",y.banDWIDth())
      .attr("rx",21)
      .attr("ry",21);

    g.SELEctAll(".bar2")
      .data(mockData)
      .enter()
      .append("rect")
      .attr("fill","url(#bg-gradIEnt)")
      .attr("filter","drop-shadow(0 0 4px #418bfa)")
      .attr("class","bar2")
      .attr("x",(d) => x(number(d.col2)))
      .attr("height",21);
  },[svgWIDth,svgHeight]);

我正在使用材料 ui，我像这样更改宽度和高度：

 const isScreenDownMd = useMediaquery(theme.breakpoints.down("md"));

  useEffect(() => {
    if (isScreenDownMd) {
      setSvgWIDth(300);
      setSvgHeight(200);
    }
  },[isScreenDownMd]);

但我得到的结果是这样的：

无法在 React 钩子中调整 d3 v6 的大小？

为什么会这样？

解决方法

我建议将 width 和 height 放在一个对象中：

  const [svgSize,setSvgSize] = useState({width: 350,height: 250});

，然后更改 isScreenDownMd：

useEffect(() => {
    if (isScreenDownMd) {
      setSvgSize({width: 300,height: 200});
    }
  },[isScreenDownMd]);

...和：

useEffect(() => {
    const svg = d3
      .SELEct("#epi-chart")
      .attr("width",svgSize.width)
      .attr("height",svgSize.height);
    ...
  },[svgSize]);