如何调整胜利的差距？答案

【问题标题】：How to tune the margin in victory?如何调整胜利的差距？
【发布时间】：2017-11-17 19:58:16
【问题描述】：

下面是一个通用的胜利代码。

 <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>

这是对应的Jsfiddle

我用VictoryLegend x={width - 50} y={30}来调节饼图和图例的距离。但我发现很难精确调整它。如何增加饼图和图例的距离？

【问题讨论】：

标签： css reactjs d3.js svg victory-charts

【解决方案1】：

我可以建议您使用 g 元素和适当的 transform 属性值

g SVG 元素是一个容器，用于对其他 SVG 元素进行分组。应用于元素的转换在其所有元素上执行子元素，并且它的任何属性都被它的子元素继承元素。

还有width 和height 属性用于svg 元素而不是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>

【讨论】：

@liamxu 很高兴为您提供帮助。