c3 缩放比例类似于 d3？

Question

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

var yScale= d3.scale.linear()
.domain([0,100,500])
.range([height, height - 20, 0]);

所以我可以让我的图表主要针对低于 100 的值进行缩放，因为这是大多数值所在的位置，我不希望条形比例因超过 100 的值而倾斜。

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

谢谢

Answer 1

您可以使用比例尺来映射值，并使用 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 是为了解决来回转换时的精度问题。

Fiddle - http://jsfiddle.net/rujx39fw/

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

在 https://github.com/masayuki0812/c3/issues/971 上还有一个您可能感兴趣的相关问题，如果您喜欢冒险，它会建议另一种选择。

c3 缩放比例类似于 d3？

c3 scaling similar to d3?

javascript

scaling

d3.js

c3.js