包装文本，使用调用函数传递数据

【问题标题】：Wrapping text, using call function to pass data包装文本，使用调用函数传递数据
【发布时间】：2015-07-02 19:31:22
【问题描述】：

我正在尝试理解 mbostock 制作的包含长文本标签的 d3 代码块。

完整示例和代码：http://bl.ocks.org/mbostock/7555321

此示例之前已在 SO 上引用，但我无法理解“.tick”类如何具有可以选择并传递给“wrap”函数的文本元素。

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
.selectAll(".tick text")      //text selected here
  .call(wrap, x.rangeBand());    //wrap function called here

function wrap(text, width) {
  text.each(function() {
    var text = d3.select(this),
        words = text.text().split(/\s+/).reverse(),    //text manipulated here

我认为当调用“xAxis()”并指定 scale(x) 时，附加了“名称”数据，但我无法理解如何在“wrap()”中传递和访问这些数据"函数。

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

轴组件在调用时会创建一个特定的结构。特别是，它创建类tick 的text 元素，并将表示刻度值的数据绑定到它们。代码中使用的.call() 函数实际上传递了整个选择（在本例中为text elements) to the function given as argument. This istextargument in thewrap` 函数。

.each() 内部的调用 wrap() 然后遍历所有这些元素。 d3.select(this) 选择每个元素，.text() 访问元素的文本内容（也有其他非 D3 访问方式）。文本内容是用轴刻度显示的实际文本，这就是这里被分成几行的内容。

【讨论】：