D3.js: accessing a function's output

Question

As a novice in Javascript, I'm having trouble understanding how to access the following function's output:

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

What I do understand is that when it is passed as a callback function in .text, it successfully returns some text which displays in the browser (eg "Header [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)

So I'm assuming dimensionLabels returns some string, as if I replace .text(dimensionLabels) with .text("myString"), the original text ("Header [n°1]") is successfully replaced with "myString".

However, what I'd need to do is access the text from dimensionLabels and process it eg using:

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

But this produces the following error:

TypeError: dimensionLabels.split is not a function

Could someone kindly describe how the function above works, and what I should do to access its output?

Answer 1

dimensionLabels looks like it is a function, not a string, that takes a string as an argument.

Then, it looks like it is looking at the __ object for a property, that is an array, called dimensions , and then looking for an index [d] , which may have a property title to use as its text. If not, then it just returns the argument that you gave it d .

So, if you are trying to use it, you need to pass it a string to return either the result of __.dimensions[d].title , or if it is not found, then just the string, perhaps like this dimensionsLabels("someText") . Then, you will get a string back to you and you can call .split() on the result, or on the whole thing: dimensionsLabels("someText").split('[', 2)

The way you are doing it is calling .split() on a function, which, for the most part I believe, .split() is for strings.

Answer 2

.text takes a function as a parameter and then calls it internally passing it a d (datum) argument. So, since .text wants a function just create your own anonymous one and wrapper the call to dimensionLabels :

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

Response to Comments

The d3 .text method can take either a string or a function that returns a string. If you give it a string it sets the text to that string. If you give it a function, that function is not invoked immediately. Instead, under the hood, d3 invokes it later. When it does, it passes in the d argument and this d argument is the datum bound to that piece of the DOM. (At some point your code is data-binding with a .data call).

You get an error when you call dimensionLabels("myString") because of this line:

__.dimensions[d].title

You have some object named __ which has a property of dimensions . The property is either an array or object which can be indexed into (I don't know because you have provided enough code for me to sure):

__.dimensions["myString"]

returns undefined . And undefined will never have a property named title . And BAM, you get your error.