Keep changed position of NVD3 legend after click - d3.js

Question

I am trying to change nvd3 chart legend position to the bottom of the chart.
I've heard about the:
d3.select(.nv-legendWrap).attr("transform", "translate(x, y)")
It's actually working but a click action on the legend will replace it at the top of the chart.
And I don't get how to use de legendPostion function (that is not a function according to the console).

Answer 1

After doing this (mind the quotes):
d3.select(".nv-legendWrap").attr("transform", "translate(x,y)")
Which will, as you know, move the legend to another position, set the same position when you click it:
d3.select(".nv-legendWrap").on("click", function(){
d3.select(this).attr("transform", "translate(x,y)");
})
Here is an example, the original position of the legend is on the top, but I'm moving it to the bottom. Click it and it will remain in the same position:
var data = function() {
return stream_layers(3,10+Math.random()*100,.1).map(function(data, i) {
return {
key: 'Stream' + i,
values: data
};
});
}
/* Inspired by Lee Byron's test data generator. */
function stream_layers(n, m, o) {
if (arguments.length < 3) o = 0;
function bump(a) {
var x = 1 / (.1 + Math.random()),
y = 2 * Math.random() - .5,
z = 10 / (.1 + Math.random());
for (var i = 0; i < m; i++) {
var w = (i / m - y) * z;
a[i] += x * Math.exp(-w * w);
}
}
return d3.range(n).map(function() {
var a = [], i;
for (i = 0; i < m; i++) a[i] = o + o * Math.random();
for (i = 0; i < 5; i++) bump(a);
return a.map(stream_index);
});
}
/* Another layer generator using gamma distributions. */
function stream_waves(n, m) {
return d3.range(n).map(function(i) {
return d3.range(m).map(function(j) {
var x = 20 * j / m - i / 3;
return 2 * x * Math.exp(-.5 * x);
}).map(stream_index);
});
}
function stream_index(d, i) {
return {x: i, y: Math.max(0, d)};
}
nv.addGraph(function() {
var chart = nv.models.multiBarChart();
chart.xAxis
.tickFormat(d3.format(',f'));
chart.yAxis
.tickFormat(d3.format(',.1f'));
chart.multibar.stacked(true); // default to stacked
chart.showControls(false); // don't show controls
d3.select('#chart svg')
.datum(data())
.transition().duration(500).call(chart);
nv.utils.windowResize(chart.update);
d3.select(".nv-legendWrap").attr("transform", "translate(0,340)");
d3.select(".nv-legendWrap").on("click", function(){
d3.select(this).attr("transform", "translate(0,340)");
})
return chart;
});
#chart svg {
height: 400px;
width: 600px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.js"></script>
<div id="chart">
<svg></svg>
</div>
Have in mind that the legendPosition method is quite limited, you can only choose top or right:
chart.legendPosition("top")
chart.legendPosition("right")