D3 What is function of Data

In the DOM Manipulation chapter, we learned about different DOM manipulation methods in D3 such as append(), style(), text() etc. Each of these functions can take in a constant value or a function as a parameter. This function is a function of data. So each of these methods will be called for each of our data values bound to the DOM. Consider the following text() function.

For e.g

.text(function(d) {
    return d;
});

In the below example, d is the data at the index I

 var data = [100, 200, 300];
        var paragraph = d3.select("body")
                .selectAll("p")
                .data(data)
                .text(function (d, i) {
                    console.log("d: " + d);
                    console.log("i: " + i);
                    console.log("this: " + this);

                    return d;
                });


Below is how to add dynamic properties s

d3.selectAll("p").style("color", function(d, i) {
            var text = this.innerText;
       
            if (text.indexOf("Error") >= 0) {
                return "red";
            } else if (text.indexOf("Warning") >= 0) {
                return "yellow";
            }
    });


References:
https://www.tutorialsteacher.com/d3js/function-of-data-in-d3js