我正在尝试渲染一个svg图像在typescript。我得到了这个元素从https://observablehq.com/@erikbrinkman/d3-dag-sugiyama网站。我重写了这个，使其运行在react。我可以渲染的元素，当我序列化它使用：

var s = new XMLSerializer();
    var str = s.serializeToString(this.Image);
    console.log("image text", str)

然后，如果我将HTML粘贴回JavaScript，我就可以呈现结果图像（并且我可以看到图像），因此SVG是正确的。
我的App. tsx看起来像这样：

// this function is copied + modified a bit from the website
export const DrawGraph = ()=>{
  const nodeRadius = 20;

     ...

  .attr("alignmentBaseline", "middle")
  .attr("fill", "white");
    
  return svgNode;
  

}

export default class App extends React.Component {
  Image =  DrawGraph()
 
  render(){

   // I serialized and console.logged here
    
    return (
      
       <object data={this.Image} type="image/svg+xml"/>

    )
  }

}

我的索引. tsx是：
一个二个一个一个
我尝试重写应用程序的内容，返回从控制台复制的svg的原始字符串，在这种情况下，我看到了图像。但是，我无法通过编程重现这一点，即尝试呈现变量，或者变量的原始字符串不起作用。
目前，图像没有渲染，我没有得到编译/运行时错误。
我还不能想出写什么到app. tsx或index. tsx，这将使图像渲染。我也没有找到任何链接，当复制将使图像渲染。
另外，我还查看了：How to render a code-generated SVG in Reactjs?