问题描述
如何在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页面的链接:(我会感谢您对我的代码也有任何其他意见)。
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()函数?我想创建一个累积分布函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!