d3.js ? 不使用call方法，可以查看x轴吗？

Question

当前代码 /使用的调用方法

var svg = d3.select("#hoge").append("svg")
    .attr("width", 600).attr("height", 400)
var xScale = d3.scale.linear()
    .domain([0, 100])
    .range([0, 400]);
svg.append("g")
    .attr("class", "axis")
    .call(d3.svg.axis()
        .scale(xScale)
    );

---

我想知道 /未使用的调用方法

var svg = d3.select("#hoge").append("svg")
    .attr("width", 600).attr("height", 400)
var xScale = d3.scale.linear()
    .domain([0, 100])
    .range([0, 400]);
svg.append("g")
    .attr("class", "axis");

d3.svg.axis(svg).scale(xScale);

---

如果不使用调用方法 无法显示x轴？

Answer 1

d3.svg.axis()创建并返回一个函数，该函数附加 SVG 元素以显示轴。它实际上并没有附加任何东西。如果不调用返回的函数，则不会添加这些元素。这是 d3.js 中的常见模式，因此理解它很重要。

假设您为轴函数和轴组元素创建了这两个变量：

var axisFunction = d3.svg.axis().scale(xScale);
var axisGroup = svg.append("g")
    .attr("class", "axis");

以下两种调用axis函数的方式是等价的：

axisFunction(axisGroup);
axisGroup.call(axisFunction);

该call语法的存在只是为了像您在当前代码示例中那样启用方法链。

调用运算符与手动调用函数相同；但它可以更容易地使用方法链。

https://github.com/mbostock/d3/wiki/Selections#call

Mike Bostock 的文章Towards Reusable Charts很好地解释了这种模式。文章中描述的创建可重用图表的模式用于 d3.js 中的各种项目，例如d3.svg.axis.