d3Plus 将图例移动到顶部

Question

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

图例图片

Answer 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>

d3Plus 将图例移动到顶部

d3Plus move legend to the top

d3.js

d3plus