Question

我想要一个包含多个数据集的堆积面积图。可能不同寻常我想使用y轴来阐明每个集合代表什么及其起始值。

即。 Y轴不需要是数据范围内的常规刻度。

的集合：

[
{key: 'the first set', values: [x: 0, y: 4]},
{key: 'the second set', values: [x: 0, y: 10]},
]

y轴的刻度应为4，标记为：＆＃39; the first set: 4＆＃39;，另一个标记为：＆＃39; the second set: 10＆＃39;

＆＃13;

nv.addGraph(function() {
  var chart = nv.models.stackedAreaChart()
    .showLegend(false)
    .showControls(false);

  var data = [
    {
      key: 'first',
      values: [
        { x: 0, y: 2 }, 
        { x: 2, y: 4 }, 
        { x: 4, y: 6 }, 
        { x: 6, y: 8 }
      ]
    }, 
    {
      key: 'second',
      values: [
        { x: 0, y: 4 }, 
        { x: 2, y: 6 }, 
        { x: 4, y: 8 }, 
        { x: 6, y: 10 }
      ]
    } 
  ];

  var firstItemsLabels = ['', 'first', 'second', ''];
  var firstItemsValues = [0, 2, 4, 10];
  //the below doesn't seem to make any difference
  //var firstItemsLabels = ['first', 'second'];
  //var firstItemsValues = [2, 4];

  chart.yAxis.tickValues(firstItemsLabels);
  chart.yAxis.tickFormat(function(d, i) {
    console.log('getting tick format for d: "' + d + '" at i ' + i);
    console.log('for i: ' + i + ' = ' + firstItemsValues[i]);
    var result = firstItemsValues[i];
    return result;
  });

  d3.select('#chart svg')
    .datum(data)
    .call(chart);

  nv.utils.windowResize(chart.update);
  return chart;
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.13/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.css" rel="stylesheet">
<div id="chart">
  <svg></svg>
</div>

＆＃13;

我认为此代码段中的代码应该实现，但它不会

该代码段的控制台日志输出......

getting tick format for d: "" at i 0
for i: 0 = 0
getting tick format for d: "first" at i 1
for i: 1 = 2
Error: Invalid value for <g> attribute transform="translate(0,NaN)
getting tick format for d: "0" at i undefined
for i: undefined = undefined
getting tick format for d: "18" at i undefined
for i: undefined = undefined

...让我感到困惑，因为tickformat在一个点上寻找的值是18，而不是数据集。

我是否想要实现一些不可能的事情？如果没有，因为我明显做错了，怎么办呢？

Answer 1

如果我理解你的目标，你可以使用：

  chart.yAxis.tickValues([4,10]);
  chart.yAxis.tickFormat(function(d, i) {
    if (d === 4 || d == 10) {
      return "the first set: " + d
    }
  });

请参阅此Plunk以获取一个工作示例： http://plnkr.co/edit/sdM14ebvv8cYCvOtX8em?p=preview

在NVD3中将自定义非均匀标签添加到堆积面积图的Y轴

1 个答案: