根据React中的父大小调整d3 SVG容器的大小

Question

我有一个简单的react应用，该应用具有一个地图组件，该组件目前可渲染基本地图图像。这是我的组件类：

export interface IMapProps {
   imageWidth: number;
   imageHeight: number;
   width: number;
   height: number;
   clipX0: number;
   clipY0: number;
   clipWidth: number;
   clipHeight: number;
   updateInterval: number;
}

 interface IMapState {

 }

export default class Map extends React.Component<IMapProps, IMapState> {

    ref: SVGSVGElement;

    constructor(props: IMapProps) {
        super(props);
        his.state = {

        };
     }


   componentDidMount() {
      const svg = d3.select(this.ref);



   const img = svg.append('g')
                  .attr('id', 'map')
                  .attr('transform', 'translate(' + (-this.props.clipX0) + ',' + (-this.props.clipY0) + ')')
                  .call(d3.zoom()
                  .scaleExtent([1, 4])
                  .translateExtent([[0, 0], [this.props.imageWidth, this.props.imageHeight]])
                   .on('zoom', function() {
                    img.attr('transform', d3.event.transform);
               }));

               img.append('image')
               .style('cursor', 'move')
               .attr('xlink:href', './map.png')
               .attr('x', 0)
               .attr('y', 0)
               .attr('width',  this.props.imageWidth + 'px')
               .attr('height', this.props.imageHeight + 'px');

   img.append('image')
      .style('cursor', 'move')
      .attr('id', 'player')
      .attr('xlink:href', './player.png')
      .attr('x', 40)
      .attr('y', 40)
      .attr('width',  50 + 'px')
      .attr('height', 50 + 'px');           

    }

   update = () => {
       console.log('Updating ... map');
       this.setState({

        });
   };

   render() {
       return (
           <svg className='container' ref={(ref: SVGSVGElement) => this.ref = ref}
           width={this.props.width} height={this.props.height}>
           </svg>
         );
   }

}

我从根组件中使用该组件，如下所示：

 <Segment>
        <Map
            imageWidth={1000}
            imageHeight={892}
            width={1000}
            height={300}
            clipX0={0}
            clipY0={0}
            clipWidth={500}
            clipHeight={200}
            updateInterval={3000}
        />
    </Segment>

我正在使用语义UI，而我的父元素在这种情况下会自动调整div的大小。我正在努力以一种方式设置组件，以使组件的宽度和高度值根据其父级宽度和高度进行更改。 我用谷歌搜索并尝试了一些解决方案，例如将父元素的宽度和高度放在组件内部，例如

this.ref.parentNode.clientWidth

但是在我看来，它是svg组件，并且parentNode似乎没有clientWidth和clientHeight属性。有人可以帮我吗？如何获得父级的宽度和高度并相应地调整svg组件的大小？