单击后保持 NVD3 图例的更改位置

Posted 2023-02-16

【中文标题】单击后保持 NVD3 图例的更改位置

【英文标题】：Keep changed position of NVD3 legend after click

【发布时间】：2017-12-04 10:40:47

【问题描述】：

我正在尝试将 nvd3 图表图例位置更改为图表底部。

我听说过：

d3.select(.nv-legendWrap).attr("transform", "translate(x, y)")

它确实有效，但点击图例会将其替换为图表顶部。

而且我不知道如何使用 de legendPostion 函数（根据控制台，这不是函数）。

【参考方案1】：

这样做之后（注意引号）：

d3.select(".nv-legendWrap").attr("transform", "translate(x,y)")

如您所知，这会将图例移动到另一个位置，单击它时设置相同的位置：

d3.select(".nv-legendWrap").on("click", function()
    d3.select(this).attr("transform", "translate(x,y)");
)

这是一个例子，图例的原始位置在顶部，但我将它移动到底部。单击它，它将保持在相同的位置：

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>

请记住legendPosition 方法非常有限，您只能选择top 或right：

chart.legendPosition("top")
chart.legendPosition("right")

【讨论】：

PS：sn-p中的那个代码不是我的，我在网上找到的：jsfiddle.net/rustybailey/z4aZ4。我只是添加了移动图例的部分。