5

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

 <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}用来调节饼图和图例的距离的。但我发现很难精确调整它。如何增加饼图和图例的距离？

4

1 回答 1

0

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

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

width元素的andheight属性而svg不是viewBox. 我叉了你的小提琴，请检查 - https://jsfiddle.net/levsha/5tx2s8jj/ 这里是你和我的代码之间的差异。

<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>
于 2017-11-17T09:35:55.700 回答