我怎样才能改变传说的位置？

Question

我是AngularJS的新手，我用NDV3制作了甜甜圈饼图，我只想把这个传说移到右边，但我不能让它工作。

现在，我试着用传说的方法将图例移到甜甜圈饼图的右边，但这是行不通的。有人能指导我怎么做吗?谢谢。

这是我的代码：柱塞

Answer 1

NVD3不支持更改图例位置的选项。您必须手动完成或修改源。当然，您也可以修改nv-legendWrap的CSS并尝试定位图例。

我找到了一个解决办法，您可以通过覆盖默认的transform属性来处理CSS中的位置。第一个值是X位置，第二个值是Y位置。

.nv-series:nth-child(1){ transform: translate(0, 0); }
.nv-series:nth-child(2){ transform: translate(0, 20px); }
.nv-series:nth-child(3){ transform: translate(0, 40px); }
.nv-series:nth-child(4){ transform: translate(0, 60px); }
.nv-series:nth-child(5){ transform: translate(0, 80px); }
.nv-series:nth-child(6){ transform: translate(0, 100px); }
.nv-series:nth-child(7){ transform: translate(0, 120px); }

.nv-legend{ transform: translate(350px, 100px); }

这里是柱塞中的预览