angularjs - angular 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 コンテナーに適用されるクラスを参照します。translate(0, 0) プロパティを (x, y) ピクセル値に変更します。