d3Plus 将图例移到顶部答案

【问题标题】：d3Plus move legend to the topd3Plus 将图例移到顶部
【发布时间】：2016-12-31 04:50:39
【问题描述】：

我正在使用 d3Plus 创建树形图和条形图，但我遇到的问题是图例仅显示在图表之后，我想将该图例移动到顶部图表之前显示。原因是用户必须一直向下滚动才能看到图例。

传奇图片

【问题讨论】：

根据 d3Plus 文档，.legend() 没有 position 属性。 github.com/alexandersimoes/d3plus/wiki/Visualizations#legend

【解决方案1】：

这很痛苦，因为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>

【讨论】：