Function of Data in D3.js

Function of Data in D3.js

In the concept of DOM manipulation, we already discussed the different DOM methods such as text(), style(), append(), etc. These methods are obtaining value in the form of constant or a function as a parameter. It is considered as a function of data, so these methods can be invoked for defining the data values constrained to the DOM.

For Example   

Let’s consider the text() function.

.text(function(d)

{

            return d;

});

In the above-defined function, you can apply the various logics for manipulating the data. These methods can be treated as an anonymous function.

Now, we are going to define the two other parameters, as shown in the below script.

.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;

});

Example

Here, we have an example to understand the above method.

<!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 = [200, 500, 800];

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>

Output

After the execution of the above code, you got the following output.

In the above-mentioned example, the “d” parameter represents the data element, and “i” represents the data index of an array, and this shows the existing element reference. In this situation, it is working as a paragraph element.

In the above case, you invoked the .data(data) method. This method gives the data for selecting elements. In the above code, the data lies in the form of an array.

Dynamic Properties

With the DOM element manipulation, you can associate the attributes or properties of the elements. In some cases, these properties will be driven or constrained. The data function allows you to perform dynamic set up of the properties according to the logic or data.

For Example

If, you want to color your content or paragraph, then you can use the style() function within the function.

<!doctype html>

<html>

<head>

<script src="https://d3js.org/d3.v4.min.js"></script>

</head>

<body>

<p>Error: This is error.</p>

<p>Warning:This is warning.</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") >= 0) {

                return "purple";

            }

});

</script>

</body>

</html>

Output

After the execution of the code, you got the following output.

In the above code, we use the select.All(“p”) that helps to choose the elements of <p> (paragraph) tag. The .style() method use a color attribute over to a selected element depending on the value of the existing returned function. In this particular method, we have used some logic to check that the element’s text checks the keywords. If this function has “Error” keyword, then we get the red color, and if it has a “Warning” keyword, we get the purple color in the output.