C3 缩放类似于 D3

c3 scaling similar to d3?

本文关键字：D3 类似于 缩放 C3      更新时间：2023-09-26

我用c3制作了一些图表，它的易用性给我留下了深刻的印象。但是，我不确定是否可以像在 d3 中那样进行 3 值缩放，如下所示：

var yScale= d3.scale.linear（）
.domain（[0,100,500]）
.range（[高度， 高度 - 20， 0]）;

因此，我可以使我的图形主要针对低于 100 的值进行缩放，因为这是大多数值的位置，并且我不希望条形缩放因超过 100 的值而扭曲。

是否可以在 c3 中做这样的事情？ 还是我需要使用 d3 来获得这种缩放？

谢谢

您可以使用比例来映射值，并使用 scale.invert 来获取所有标签。例如。。。

var myScale = d3.scale.linear().domain([0, 5, 50]).range([0, 40, 50]);
var chart = c3.generate({
    data: {
        columns: [
            ['A', 3, 2, 1, 4, 1.5, 42.5].map(function (value, index) {
                return index ? myScale(value) : value;
            })],
        type: 'spline'
    },
    tooltip: {
        format: {
            value: function (value) {
                return parseFloat(myScale.invert(value).toFixed(5));
            }
        }
    },
    axis: {
        y: {
            tick: {
                format: function (d) {
                    return myScale.invert(d)
                }
            }
        }
    }
});

parseFloat 和 toFixed 是为了摆脱来回转换时的精度问题。

小提琴 - http://jsfiddle.net/rujx39fw/

在 https://github.com/masayuki0812/c3/issues/252 的c3 github上也有类似的问题。它以类似的解决方法关闭（也有一个链接的问题 - 通过引用此解决方法关闭）

如果您

喜欢冒险，您可能在 https://github.com/masayuki0812/c3/issues/971 还有一个相关的问题，它提出了另一种选择。

相关文章：