勝利のマージンを調整するには？

Question

以下は一般的な勝利のコードです。

<svg viewBox={viewBox}> 
      <VictoryPie 
      standalone={false} 
      width={width} height={height} 
      data={data} 
      innerRadius={innerRadius} 
      colorScale={colorScale} 

      /> 
      <VictoryLegend x={width - 50} y={30} 
      title="Totals" 
      centerTitle 
      orientation="vertical" 
      gutter={20} 
      style={{ 
       title: { fontSize: 15 } 
      }} 
      data={legendDataWithStyle} 
      standalone={false} 
      /> 
</svg> 

これは私が円グラフおよび凡例の距離を調節するVictoryLegend x={width - 50} y={30}を用いた対応Jsfiddle

あります。しかし、それを正確に調整するのは難しいことがわかった。どのように私はパイと伝説の距離を増やすことができますか？

Answer 1

私はあなたがtransform属性

SVG要素がグループ他のSVG要素に使用された容器であるグラムのために適切な値でg要素を使用することをお勧めすることができます。 要素に適用された変換は、すべての 子要素で実行され、その属性のいずれも子要素 要素によって継承されます。

そしてwidthとheightsvg要素の代わりに、viewBoxの属性。 私はあなたのフィドルをフォークしました。どうかチェックしてください - https://jsfiddle.net/levsha/5tx2s8jj/ ここにthe diff between your and my code。

<svg width={width + 100} height={height}> // we add 100 here to legend fits in svg 

...

<g transform="translate(40,0)"> // we move legend on 40px here 
    <VictoryLegend x={width} y={30} 
    title="Totals" 
    centerTitle 
    orientation="vertical" 
    gutter={20} 
    style={{ 
    title: { fontSize: 15 } 
    }} 
    data={legendDataWithStyle} 
    standalone={false} 
    /> 
</g>