angularjs - 在角度 nvd3.js 中更改图例的位置

Question

我正在尝试将图例的位置更改为饼图的底部 [默认情况下为顶部]。在没有 angular-nvd3 的普通 nvd3.js 中，建议使用：

d3.select(".nv-legendWrap")
    .attr("transform", "translate(100,100)");

是否可以在 angular-nvd3 中执行此操作，还是有其他选择？

Answer 1

用您的自定义属性覆盖 CSS：

.your-div-class .nv-series:nth-child(1){ transform: translate(0, 0); }
.your-div-class .nv-series:nth-child(2){ transform: translate(0, 20px); }
.your-div-class .nv-series:nth-child(3){ transform: translate(0, 40px); }
.your-div-class .nv-series:nth-child(4){ transform: translate(0, 60px); }
.your-div-class .nv-series:nth-child(5){ transform: translate(0, 80px); }
.your-div-class .nv-series:nth-child(6){ transform: translate(0, 100px); }
.your-div-class .nv-series:nth-child(7){ transform: translate(0, 120px); }
.your-div-class .nv-legend{ transform: translate(180px, 150px); }
.your-div-class .nv-legendWrap{ transform: translate(-80px, 70px); }

your-div-class 是指应用于包含图表指令的 div 容器的类。使用 (x, y) 像素值更改 translate(0, 0) 属性。