为什么我可以在秤上输入参数？

Question

我正在做一个简单的直方图：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')})我正在使用Youtube 学习 D3该scale变量x并y没有功能，但即使他们的功能他们没有参数。但是在bars.append('rect'), return x(d.x), return x(d.dx)和return y(d.y)中的作用就像也有参数的函数......有人可以向我解释这怎么可能吗？

Answer 1

你之前这么说...

比例变量 x 和 y 不是函数。

嗯，这是不正确的。D3 秤（在任何版本中）都是函数。在你的情况下，你有一个 D3 v3 规模。

为了向您展示这是一个规模，以及它需要什么参数，让我们看看 D3 v3源代码。它将带我们通过函数返回函数的迷宫。

这是d3.scale.linear()函数：

d3.scale.linear = function() {

    return d3_scale_linear([0, 1], [0, 1], d3_interpolate, false);

};

如您所见，它返回一个函数，d3_scale_linear。该函数有 4 个参数，前两个是默认范围和域。显然，您可以稍后更改范围和域，就像您所做的那样。

如果您查看d3_scale_linear，您会看到它返回此函数：

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。

为了完整起见，该output函数取决于d3_scale_polylinear或d3_scale_bilinear，它们是执行实际工作的函数：

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));

    };

}