每n个值显示一个勾号

时间:2014-09-22 14:46:51

标签: javascript d3.js charts

如何设置一个不显示5或10的轴或任何数量的刻度,而是每n个单位显示一个刻度。在这种情况下,如果数据集如下所示:

[2,3,6,7,10,13,17,20]

如果我将其配置为每隔5步显示一个勾号,则勾号将在0, 5, 10, 15, 20上。 如何实现?

以下是我正在处理Chart

的一个真实示例

我希望x轴在每20年后显示一个勾号,因此它不应该是0, 10, 20, 30, ..., n,而是0, 20, 40, 60, 80, ..., n

对于y轴,我需要500k步进值,因此它应该是0, 500k, 1m, 1.5m, ..., n

更新

我找到了一个简单的工作解决方案。我像往常一样通过`.call(yAxis)调用一个轴,然后我找到通过创建的刻度并检查当我将它们的值除以我需要的步数时它们的数据是否有余数。如果没有余数,则将不透明度设置为1,否则通过将不透明度设置为0来隐藏它们。这是一个示例:

          yAxisElement
            .selectAll('.tick')
            .style({
              opacity: function (d, i) {
                return d % 500000 ? 0 : 1;
              }
            })

这不是一个理想的解决方案,因为它无法按价值添加现有值中间的刻度,就像在此图像上,如果我想使用0,15,30,45等,只是显示/隐藏已存在的那些。在我需要为其他值添加刻度的情况下,我需要创建自定义轴或使用Lars Kotthoff建议的solution

0 个答案:

没有答案