如何在 nvd3 中选择不同的属性而不是 `key`

Question

所有 nvd3 示例（我发现的）如下所示：

return [
{
  values: sin,      //values - represents the array of {x,y} data points
  key: 'Sine Wave', //key  - the name of the series.
  color: '#ff7f0e'  //color - optional: choose your own line color.
}, ...]

我想使用一个函数，它会根据图表/绘图区域的大小使用不同的键。

因此，如果我有一个较大的绘图区域，我的全名 space 为 Sine Wave，而在较小的区域中，我只显示 sin.

是的，我可以完成系列并更新 key 属性，但是将所有必要的数据放入对象并选择渲染时间会更容易，哪个键应该被使用。

Answer 1

您可以使用chart.legend.key()

 chart.legend.key(function(d){
     // Return the key you want for series d here based on screen realestate
     // FYI: The default would return d.key
 });

所以它可能看起来像这样：

    function setLegendKeys(d){
      var width = document.body.clientWidth;
      var abbreviations = {
        'Sine Wave': 'sin',
        'Cosine Wave': 'cos'
      };
      if (width < 500){
        return abbreviations[d.key];
      }
      return d.key;
    }

    chart.legend.key(setLegendKeys)

查看此 Plunk 以获取实际示例： http://plnkr.co/edit/lisKuZ5ivj25QhyjlQUW?p=preview

如何在 nvd3 中选择不同的属性而不是 `key`

How to choose a different property instead of `key` in nvd3

nvd3.js

如何在 nvd3 中选择不同的 属性 而不是 `key`

How to choose a different property instead of `key` in nvd3

nvd3.js

如何在 nvd3 中选择不同的属性而不是 `key`