Javascript 为什么我可以在刻度上输入参数？

我正在做一个简单的直方图：

var width = 500,
  height = 500,
  padding = 50;
d3.csv('mydata.csv', function(data) {
  var map = data.map(function(i) {
    return parseInt(i.age)
  })
  var histogram = d3.layout.histogram()
    .bins(7)(map)
  console.log(histogram)

  var y = d3.scale.linear()
    .domain([0, d3.max(histogram.map(function(i) {
      return i.length;
    }))])
    .range([0, height])

  var x = d3.scale.linear()
    .domain([0, d3.max(map)])
    .range([0, width]);

  var canvas = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height + padding);

  var bars = canvas.selectAll(".bar").data(histogram)
    .enter().append('g').attr('class', 'bar')
  bars.append('rect')
    .attr('x', function(d) {
      return x(d.x);
    })
    .attr('y', 0)
    .attr('width', function(d) {
      return x(d.dx);
    })
    .attr('height', function(d) {
      return y(d.y)
    })
    .attr('fill', 'purple')

})

我正在使用

scale

变量

x

和

y

不是函数，但即使它们是函数，也没有参数

但是在

栏中，append（'rect'）

，

返回x（d.x）

，

返回x（d.dx）

和

返回y（d.y）

的作用类似于也有参数的函数

有人能解释一下这是怎么可能的吗？

你说过

比例变量x和y不是函数

那是不对的。D3刻度（任何版本）都是功能。在你的情况下，你有一个D3V3的规模

为了向您展示这是一个标尺，以及它需要什么参数，让我们看看D3V3。它将带我们穿过函数迷宫，返回函数

这是

d3.scale.linear（）

函数：

d3.scale.linear = function() {
    return d3_scale_linear([0, 1], [0, 1], d3_interpolate, false);
};

function rescale() {
    var linear = Math.min(domain.length, range.length) > 2 ? d3_scale_polylinear : d3_scale_bilinear,
        uninterpolate = clamp ? d3_uninterpolateClamp : d3_uninterpolateNumber;
    output = linear(domain, range, uninterpolate, interpolate);
    input = linear(range, domain, uninterpolate, d3_interpolate);
    return scale;
}

function scale(x) {
    return output(x);
}

如您所见，它返回一个函数，

d3\u scale\u linear

。该函数接受4个参数，前两个是默认范围和域。显然，您可以稍后更改范围和域，就像您所做的那样

如果查看

d3\u scale\u linear

，您将看到它返回以下函数：

d3.scale.linear = function() {
    return d3_scale_linear([0, 1], [0, 1], d3_interpolate, false);
};

function rescale() {
    var linear = Math.min(domain.length, range.length) > 2 ? d3_scale_polylinear : d3_scale_bilinear,
        uninterpolate = clamp ? d3_uninterpolateClamp : d3_uninterpolateNumber;
    output = linear(domain, range, uninterpolate, interpolate);
    input = linear(range, domain, uninterpolate, d3_interpolate);
    return scale;
}

function scale(x) {
    return output(x);
}

依次返回此函数：

d3.scale.linear = function() {
    return d3_scale_linear([0, 1], [0, 1], d3_interpolate, false);
};

function rescale() {
    var linear = Math.min(domain.length, range.length) > 2 ? d3_scale_polylinear : d3_scale_bilinear,
        uninterpolate = clamp ? d3_uninterpolateClamp : d3_uninterpolateNumber;
    output = linear(domain, range, uninterpolate, interpolate);
    input = linear(range, domain, uninterpolate, d3_interpolate);
    return scale;
}

function scale(x) {
    return output(x);
}

而

x

是使用时传递给标尺的参数，就像示例中的

x（d.x）

。传递的参数是

d.x

为了完整起见，

输出

函数取决于执行实际作业的函数，即

d3\u比例(多段线)

或

d3\u比例(双线性)

：

function d3_scale_bilinear(domain, range, uninterpolate, interpolate) {
    var u = uninterpolate(domain[0], domain[1]),
        i = interpolate(range[0], range[1]);
    return function(x) {
        return i(u(x));
    };
}

function d3_scale_polylinear(domain, range, uninterpolate, interpolate) {
    var u = [],
        i = [],
        j = 0,
        k = Math.min(domain.length, range.length) - 1;
    if (domain[k] < domain[0]) {
        domain = domain.slice().reverse();
        range = range.slice().reverse();
    }
    while (++j <= k) {
        u.push(uninterpolate(domain[j - 1], domain[j]));
        i.push(interpolate(range[j - 1], range[j]));
    }
    return function(x) {
        var j = d3.bisect(domain, x, 1, k) - 1;
        return i[j](u[j](x));
    };
}

函数d3_scale_双线性（域、范围、非合并、插值）{
var u=非公司化（域[0]，域[1]），
i=插值（范围[0]，范围[1]）；
返回函数（x）{
返回i（u（x））；
};
}
函数d3_比例_多段线（域、范围、非合并、插值）{
var u=[]，
i=[]，
j=0，
k=数学最小值（domain.length，range.length）-1；
if（域[k]<域[0]）{
domain=domain.slice（）.reverse（）；
range=range.slice（）.reverse（）；
}
虽然（++j误读了文档并有一个大脑快捷方式，但我的回答完全错了。抱歉。删除。谢谢！函数有这么多函数。在函数末尾，它可能有需要我通过的片段的函数。。