如何在d3.js中创建新的scale()函数?我想创建一个累积分布函数

时间:2013-07-19 23:43:02

标签: d3.js scale interpolation

如何在d3中创建自己的scale()函数?

我正在尝试使用我想自己创建的不同函数替换d3 d3.scale.linear()中的漂亮线性刻度。我的新比例将基于累积分布函数,因此中值将出现在x轴的中心,并且与中值的两个标准偏差的值将出现两倍于x轴的中心作为与平均值相差一个标准的东西。

以下是我的jsfiddle页面的链接:http://jsfiddle.net/tbcholla/kR2PS/3/(我将非常感谢您对我的代码的任何其他评论!)

现在我有:

var x = d3.scale.linear()
.range([0, width])
.domain(d3.extent([0, data.length]));    

我见过scale.pow()scale.log()。现在我想创建一个新功能! 谢谢! 编辑:我找到了scale.quantile()函数,它可能为我提供解决方案。我的相关问题:Plotting a line graph with scale.quantile()

1 个答案:

答案 0 :(得分:0)

这是我们如何在d3.scale.liner()中添加新功能的示例。对于null值,我的函数返回null(在这种情况下,d3.scale.liner()返回0)。主要方法是包装原始比例及其所有方法。

我没有为所有情况测试此功能。但是对于它的基本功能,它正在工作。不幸的是,我没有找到更简单的方法:(

/**
 * d3.scale.linear() retrun 0 for null value
 * I need to get null in this case
 * This is a wrapper for d3.scale.linear()
 */
_getLinearScaleWithNull: function() {
    var alternativeScale = function(origLineScale) {
        var origScale = origLineScale ? origLineScale : d3.scale.linear();

        function scale(x) {
            if (x === null) return null; //this is the implementation of new behaviour
            return origScale(x);
        }

        scale.domain = function(x) {
            if (!arguments.length) return origScale.domain();
            origScale.domain(x);
            return scale;
        }

        scale.range = function(x) {
            if (!arguments.length) return origScale.range();
            origScale.range(x);
            return scale;
        }

        scale.copy = function() {
            return alternativeScale(origScale.copy());
        }

        scale.invert = function(x) {
            return origScale.invert(x);
        }

        scale.nice = function(m) {
            origScale = origScale.nice(m);
            return scale;
        }

        scale.ticks = function(m) {
            return origScale.ticks(m);
        };


        scale.tickFormat = function(m, Format) {
            return origScale.tickFormat(m, Format);
        }

        return scale;
    }

    return alternativeScale();
},