React+TypeScript中渲染D3生成SVG元素失败求助

问题描述 #

在React+TypeScript环境中，参考ObservableHQ的D3-DAG Sugiyama代码改造后生成SVG元素。手动粘贴XMLSerializer序列化得到的SVG字符串到代码中可正常显示，但使用<object>标签传入该SVG元素时，无编译/运行报错却无法显示；程序化使用序列化字符串渲染也失败。

核心代码 #

DrawGraph函数（改造自原网站） #

export const DrawGraph = ()=>{
  const nodeRadius = 20;
  // ... 省略D3-DAG绘制逻辑
  .attr("alignmentBaseline", "middle")
  .attr("fill", "white");
  return svgNode;
}

App组件 #

export default class App extends React.Component {
  Image = DrawGraph()
  render(){
    return (
       <object data={this.Image} type="image/svg+xml"/>
    )
  }
}

解决方法 #

1. 修正