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.

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

Within this function, we can apply any logic to manipulate the data. These are anonymous functions, meaning that there is no name associated with the function.

Other than the data (or d) parameter, there are two other parameters available to us.

.text(function (d, i) {
    console.log(d); // the data element
    console.log(i); // the index element
    console.log(this); // the current DOM object

    return d;
});

Consider the following example.

Example: Function of Data

<p>Error: This is error.</p>
<p>Warning:This is warning.</p>
<p>Success:This is success.</p>
<!doctype html>
<html>
<head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
<head>
<body>
    <p></p>
    <p></p>
    <p></p>

    <script>
        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;
                });
    </script>
</body>
</html>

Try it

In the above example, the parameter "d" gives you your data element, "i" gives you the index of data in the array and this is a reference of the current DOM element. In this case, it is the paragraph element.

Notice that we have called .data(data) function above. The data() function provides data to the selected elements, in our case it is data array. You will learn about data() function in the Data Bindingsection.

Dynamic Properties

Along with manipulating DOM elements, we might want to add certain properties or attributes to our elements. Sometimes, you might want these properties to be bound to or driven by your data.

Function of data can be useful to setting up properties dynamically based on your data or business logic. For example, if you would like to color your paragraph depending on the content of the paragraph, you can do so inside your style property function.

Example: Setting Attribute Value Dynamically

<p>Error: This is error.</p>
<p>Warning:This is warning.&lt;/</p>

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

Try it

In the above example, d3.selectAll("p") selects all the <p> elements and the .style () method applies a color attribute to the selected elements based on the given function's return statement. Inside this function, we have used some logic to check whether the current<p> element's text contains keywords like "Error" or "Warning". If it contains the keyword "Error", we return the color red or if it contains the keyword "Warning", we return the color yellow.

Thus, function of data is an important feature of D3.js.