Reactjs 使用D3.js绘制和展示弦图的右下方象限

我正在try 使用d3js在一个reaction js项目中创建一个和弦图.我遇到的问题是，我的图表显示部分正常，因为它只显示图表的右下角(只有四分之一).下面是一个图表示例:https://codesandbox.io/s/amazing-leaf-3lgjwc，下面是我的图表组件的代码:

const ChordDiagram = ({ data }) => {
  const mySVGRef = useRef(null);
  const wrapperRef = useRef();

  // set the dimensions and margins of the graph
  var margin = { top: 10, right: 30, bottom: 30, left: 40 },
    width = 400 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

  useEffect(() => {
    var svg = d3.select(mySVGRef.current);

    //so that we dont have duplication
    svg.html(null);
    svg
      .attr("width", width)
      .attr("height", height + margin.top + margin.bottom)
      .attr("transform", `translate(${margin.top * 12},${margin.top * 12})`);

    // give this matrix to d3.chord(): it will calculates all the info we need to draw arc and ribbon

    const res = d3
      .chord()
      .padAngle(0.05) // padding between entities (black arc)
      .sortSubgroups(d3.descending)(data);

    // add the groups on the inner part of the circle
    svg
      .datum(res)
      .append("g")
      .selectAll("g")
      .data((d) => d.groups)
      .join("g")
      .append("path")
      .style("fill", "grey")
      .style("stroke", "black")
      .attr("d", d3.arc().innerRadius(200).outerRadius(210));

    // Add the links between groups
    svg
      .datum(res)
      .append("g")
      .selectAll("path")
      .data((d) => d)
      .join("path")
      .attr("d", d3.ribbon().radius(200))
      .style("fill", "#69b3a2")
      .style("stroke", "black");
  }, [data]);

  return (
    <div className="row">
      <div className="col-lg-1"></div>
      <div className="col-lg-10 chart-div" ref={wrapperRef}>
        <svg ref={mySVGRef}></svg>
      </div>
      <div className="col-lg-1"></div>
    </div>
  );
};

export default ChordDiagram;