javascript - D3.js:访问函数的输出

Question

作为 Javascript 新手，我无法理解如何访问以下函数的输出:

function dimensionLabels(d) {
  return __.dimensions[d].title ? __.dimensions[d].title : d;  // dimension display names
}

我所理解的是，当它作为 .text 中的回调函数传递时，它成功返回一些显示在浏览器中的文本(例如“标题 [n°1]”):

    .append("svg:text")
      .attr("text-anchor", "middle")
      .attr('x', 0)
      .attr('y', -10)
      .attr('class', "label")

      .append('svg:tspan')
      .attr('x', 0)
      .attr('dy', 0)
      .text(dimensionLabels)

所以我假设DimensionLabels返回一些字符串，就好像我用.text(“myString”)替换.text(dimensionLabels)一样，原始文本(“Header [n°1]”)被成功替换为“myString” ”。

但是，我需要做的是从维度标签访问文本并处理它，例如使用:

.text(dimensionLabels.split('[', 2)) 

但这会产生以下错误:

TypeError: dimensionLabels.split is not a function

有人可以描述一下上面的函数是如何工作的，以及我应该做什么来访问它的输出吗？

Answer 1

.text 将函数作为参数，然后在内部调用它，并向其传递 d(数据)参数。因此，由于 .text 想要一个函数，只需创建您自己的匿名函数并包装对 dimensionLabels 的调用:

.text(function(d){
  var string = dimensionLabels(d);
  return string.split('[', 2);
})

回复评论

d3 .text 方法可以采用字符串或返回字符串的函数。如果给它一个字符串，它会将文本设置为该字符串。如果您给它一个函数，该函数不会立即调用。相反，在后台，d3 稍后会调用它。当它这样做时，它会传入 d 参数，这个 d 参数是绑定(bind)到该 DOM 片段的数据。 (在某些时候，您的代码通过 .data 调用进行数据绑定(bind))。

由于以下行，您在调用 dimensionLabels("myString") 时收到错误:

__.dimensions[d].title

您有一些名为 __ 的对象，它具有 dimensions 属性。该属性是一个可以索引的数组或对象(我不知道，因为你已经为我提供了足够的代码来确定):

__.dimensions["myString"]

返回未定义。并且未定义永远不会有名为title的属性。然后BAM，你得到了你的错误。