css - 如何调整胜率？

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>

这是对应的Jsfiddle

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

Answer 1

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

The g SVG element is a container used to group other SVG elements. Transformations applied to the element are performed on all of its child elements, and any of its attributes are inherited by its child elements.

width 和 height 属性用于 svg 元素而不是 viewBox。我 fork 了你的 fiddle ，请检查 - 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>