如何在d3.js中创建一个新的scale（）函数？我想创建一个累积分布函数 [英] How do I create a new scale() function in d3.js? I would like to create a cumulative distribution function

问题描述

如何在d3中创建自己的scale（）函数？

How do I create my own scale() function in d3?

我试图替换d3 d3中的好的线性标尺。 scale.linear（）使用不同的函数，我想自己创建。我的新比例将基于累积分布函数，使得中值将出现在x轴的中心，并且与中值的两个标准偏差的值将出现距离x轴的中心两倍

I am trying to replace the nice linear scale in d3 d3.scale.linear() with a different function that I would like to create myself. My new scale would be based on a cumulative distribution function, so that the median value would appear in the center of the x axis, and a value that was two standard deviations from the median would appear twice as far from the center of the x axis as something that was one standard deviation from the mean.

这是一个指向我的jsfiddle页面的链接： http://jsfiddle.net/tbcholla/kR2PS/3/ （我会感谢您对我的代码也有任何其他意见）。

Here is a link to my jsfiddle page: http://jsfiddle.net/tbcholla/kR2PS/3/ (I would appreciate any other comments you might have about my code as well!)

现在我有：

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

我看过 scale.pow（）和 scale.log（）。现在我想创建一个新的函数！
谢谢！
编辑：我找到了函数scale.quantile（），它可能保存我的解决方案。我的相关问题：使用scale.quantile（）绘制折线图

I've seen scale.pow() and scale.log(). Now I'd like to create a new function! Thanks! I found the function scale.quantile(), which might hold the solution for me. My related question: Plotting a line graph with scale.quantile()

推荐答案

这是一个我们如何在d3.scale.liner（）中添加新功能的示例。对于空值我的函数返回null（在这种情况下，d3.scale.liner（）返回0）。主要的方法是包装原来的比例和所有的方法。

This is an example how we can add new functionality in d3.scale.liner(). For null values my function returns null (d3.scale.liner() returns 0 in this case). The primary approach is to wrap the original scale and all his methods.

我没有测试这个函数的所有情况。但是对于基本的功能，它的工作。很遗憾，我没有找到更简单的方法：（

I didn't test this function for all cases. But for basic functionality it's working. Unfortunately I didn't found easier way to do it :(

/**
 * 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();
},

这篇关于如何在d3.js中创建一个新的scale（）函数？我想创建一个累积分布函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！