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

以下两种调用轴功能的方法是等效的：

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

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

调用操作符与手动调用函数相同;但它更容易使用方法链。

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

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

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

1 个答案: