d3Plus将图例移至顶部
d3Plus将图例移至顶部
提问于 2016-12-30 17:35:28
我正在使用d3Plus创建树状图和条形图，但我遇到的问题是，图例只显示在图表之后，我想将该图例移到顶部的图表前面。原因是用户必须一直向下滚动才能看到传说。
传奇图像
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-12-30 20:25:42
这是痛苦的，因为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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41400279
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号