Question

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

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

此示例之前已在SO上引用，但我无法理解＆＃34; .tick＆＃34; class有一个文本元素，可以选择并传递给＆＃34; wrap＆＃34;功能

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

我认为当＆＃34; xAxis（）＆＃34;调用然后缩放（x）指定＆＃34; name＆＃34;数据正在附加，但我无法理解如何在＆＃34; wrap（）＆＃34;中传递和访问这些数据。功能

Answer 1

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

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

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

1 个答案: