tickSize d3.js v4中的源代码

时间:2017-05-26 22:04:07

标签: javascript d3.js

我试图了解d3.js v4中的tickSize文档:

  

axis.tickSize([size])<>

     

如果指定了size,则将内部和外部刻度尺寸设置为   指定值并返回轴。如果未指定大小,   返回当前内部刻度大小,默认为6。

当我检查源代码时,我得到了这个:

axis.tickSize = function(_) {
    return arguments.length ? (tickSizeInner = tickSizeOuter = +_, axis) : tickSizeInner;
  };

我真的不明白发生了什么。

  • 什么是_作为函数的参数?
  • 代码(tickSizeInner = tickSizeOuter = +_, axis)的这部分内容是什么?

来源:https://github.com/d3/d3-axis/blob/master/src/axis.js#L140

1 个答案:

答案 0 :(得分:2)

如果没有为方法提供参数,该方法将返回tickSizeInner的当前值。或者,如果提供了参数,它将设置tickSizeInnertickSizeOuter变量。

这是在这一行完成的:

return arguments.length ? (tickSizeInner = tickSizeOuter = +_, axis) : tickSizeInner;

使用ternary operator这是一种简写方法:

if(arguments.length)  {
    tickSizeInner = tickSizeOuter = +_; return axis 
}
else {
   return tickSizeInner; 
}

有关使用三元操作的逗号,请参阅this question, King's answerthis doc

这是功能逻辑的精简版本:



function tick(_) {
    return arguments.length ? _ : 6;
  };
  
console.log(tick())
console.log(tick(4))




这种方法的美妙之处在于你的getter和setter方法是同一个。

请注意,javascript中的零是假的,请看下面的行(undefined也是假的,包括用于比较,请参阅also this):



if(0) { console.log("true"); }
else { console.log("false"); }

if(1) { console.log("true"); }
else { console.log("false"); }

if(undefined){ console.log("true"); }
else { console.log("false"); }




因此,如果没有传递参数,则返回当前的刻度尺寸。如果传递了一个参数(下划线是一个有效的变量名,请参阅this question),那么它将被强制转换为一个数字(+_)并设置为等于刻度尺寸(参见this question& #39;将字符串转换为数字的最佳答案。)

以下是强制变量为整数的示例:



var a = "1";
var b = "2";

console.log(a+b);

a = +a;
b = +b;

console.log(a+b);




最后,您可以按照代码中显示的方式为多个变量赋值。例如:



var a = 0;
var b = 0;

a = b = 5;

console.log(a);
console.log(b);