Я использую d3Plus для создания treemap и гистограммы, но проблема, с которой я столкнулась, заключается в том, что легенда отображается только после графика, я бы хотел переместить эту легенду, чтобы показать ее раньше диаграмму вверху. Причина этого в том, что пользователю приходится прокручивать весь путь вниз, чтобы увидеть легенду.d3Plus переместить легенду в начало
Легенда изображения
Это является болезненным из-за, как d3plus оживляет (т.е. переходы) различные компоненты диаграммы, как они загружаются. Но вы можете переместить легенду сами что-то вроде:
<!doctype html>
<meta charset="utf-8">
<script src="//d3plus.org/js/d3.js"></script>
<script src="//d3plus.org/js/d3plus.js"></script>
<div id="viz"></div>
<script>
var data = [{
"year": 1991,
"name": "alpha",
"value": 15
}, {
"year": 1991,
"name": "beta",
"value": 10
}, {
"year": 1991,
"name": "gamma",
"value": 5
}, {
"year": 1991,
"name": "delta",
"value": 50
}, {
"year": 1992,
"name": "alpha",
"value": 20
}, {
"year": 1992,
"name": "beta",
"value": 10
}, {
"year": 1992,
"name": "gamma",
"value": 10
}, {
"year": 1992,
"name": "delta",
"value": 43
}, {
"year": 1993,
"name": "alpha",
"value": 30
}, {
"year": 1993,
"name": "beta",
"value": 40
}, {
"year": 1993,
"name": "gamma",
"value": 20
}, {
"year": 1993,
"name": "delta",
"value": 17
}, {
"year": 1994,
"name": "alpha",
"value": 60
}, {
"year": 1994,
"name": "beta",
"value": 60
}, {
"year": 1994,
"name": "gamma",
"value": 25
}, {
"year": 1994,
"name": "delta",
"value": 32
}]
var visualization = d3plus.viz()
.container("#viz")
.data(data)
.type("bar")
.id("name")
.x("year")
.y("value")
.color("name")
.legend(true)
.draw();
moveLegend();
function moveLegend() {
var l = d3.select("#key"),
c = d3.select("#container");
// wait for the legend and container to appear
// if not wait 200 milliseconds and try again
if (!l.size() || !c.size()) {
setTimeout(moveLegend, 200);
} else {
// both now exist
// move legend to top
l.transition()
.attr("transform","translate(0,0)");
// move chart down height of legen
var lh = l.node().getBBox().height;
c.attr("transform", "translate(0," + lh + ")");
}
}
</script>
Согласно d3Plus документации, '.legend()' не имеют 'position' собственности. https://github.com/alexandersimoes/d3plus/wiki/Visualizations#legend – McNets