Selection in D3.js
Selection in D3.js
Selection is an important concept of D3.js. This concept depends upon the Cascading Stylesheet (CSS) selectors. It helps you to choose one or more than one element on a webpage. The Selection also allows you to remove, append, and modify the data items related to the already existing datasets.The selections allow you to modify the most powerful data-driven conversion of the DOM (Document Object Model).
The selection methods return the existing selection, or the new selection, which allow you to terse the applications of the various operations on a selection through the method chaining.
The selection methods are immutable. The selection methods affect the selected elements and return a new selection value instead of modifying the existing value. However, the elements are mutable because they transform the HTML documents.
This chapter describes how to generate the data visualization. Here, we have two methods that help you to choose the data elements from the HTML document. They are-
- select() Method- This method allows you to perform the selection of only one DOM element by the match with the Cascading Stylesheet (CSS) selector. If a method has more than one selector to choose, then it will choose the first one.
- selectAll() Method- This method allows you to perform the selection of the Document Object Model (DOM) elements by the match with a CSS selector. The D3.js selectors are almost the same as the jQuery selectors.
Now, we are going to elaborate on each method in detail with examples.
select() Method
The select() method helps you to select the elements (HTML) according to the Cascading Stylesheets (CSS) selector. You can determine and access the HTML elements in CSS selector by using the following three ways-
- Selection by the HTML Tag
- Selection by the Class name
- Selection by the Id of HTML element
Here, we have discussed each way of selection method with the help of an example.
Selection by the HTML Tag
In this method of selection, you can select the HTML elements with the help of tags. It includes <p> tag, <div> tag, <span> tag, and <h2> tag, etc.
Here, we have a syntax which helps to choose the “div” tag elements.
Syntax
d3.select (“div”)
Example
Here, we have an example given below to understand the concept of selection by HTML tag.
<!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> </head> <body> <div> Welcome to the world of D3.js </div> <script> alert(d3.select("div").text()); </script> </body> </html>
Output
After the successful execution of the above-given code, you get the following output.
When you click on the OK button in the alert dialog box in the above given screenshot, you get the following output.
Selection by the Class name
In this way of selection, you can select the HTML elements with the help of CSS classes. Here, we have a syntax that helps you to choose the HTML elements with the help of the class name.
Syntax
d3.select (“.<class name>”)
Example
Here, we have an example given below to understand the concept of selection by the class name. Here, we have an example given below to understand the concept of selection by HTML tag.
<!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> </head> <body> <div class = "classname"> Hello D3.js </div> <script> alert(d3.select(".classname").text()); </script> </body> </html>
Output
After the successful execution of the above given code, you get the following output:
In the above-given screenshot, when you click on the OK button in the alert dialog box, you will get the following output:
Selection of the Id of the HTML element
The HTML elements always have a unique Id. The unique Id helps you to access it with the help of select() method. Here, we have a syntax, which helps you to access the element by using the id.
Syntax
d3.select (“3<id of the element>”)
Example
Here, we have an example given below to understand the concept of selection by the id of an element.
<!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> </head> <body> <div id = "welcome"> Welcome to D3.js </div> <script> alert(d3.select("welcome").text()); </script> </body> </html>
Output
After the successful execution of the above given code, you will get the following output:
In the above-given screenshot, when you click on the OK button in the alert dialog box, you will get the following output:
Adding DOM Elements
You can add DOM (Document Object Model) elements into the pre-existing HTML documents. D3.js selection serves two following methods to affix the new elements into the existing HTML document. These methods are-
- append() method
- text() method
Here, we have a detailed description of these methods.
append() method
The above method allows affixing a new element into the current HTML document. It will be treated as the last child of the element in the existing selection. This method also helps to change the element’s style, attributes, HTML, properties, and content.
Example
Here, we have an example to clarify the above method.
<!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> </head> <body> <div class = "class1">D3.js is a framework</div> <script> d3.select("div.class1").append("span"); </script> </body> </html>
In the above example code, first we created the webpage named append.html and then provided the CDN path of D3.js.
Output
After the successful execution of the program code, you will get the following output:
The append() method also helps to attach a new span tag inside the div tag as given in the below code.
<div class = “Class1”> Hello D3.js! <span></span> </div>
text() method
The text() method helps to fix the content of affixed or selected HTML elements. You can easily modify the content of the elements that you selected.
Example
Here, an example is given below to show the concept of the above method.
<!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> </head> <body> <div class = "class2">D3.js is a JavaScript tool!</div> <script> d3.select("div.class2").append("span").text("Data-driven-document(D3)"); </script> </body> </html>
Output
After the successful execution of the above example code, you will get the following output:
In the above output, there is a chaining operation. D3.js convey a mechanism known as Chain Syntax, which you can identify by the jQuery. The chaining method helps you to perform the various operations in a single line of program code. It is easy to implement and fast process.
You can also access the same program code without the help of chain syntax, as given in the below code.
var body = d3.select (“div.class2”); var span = body.append (“span”); span.text (“Data-driven-document (D3)”);
Modifying the Elements
The term modification can be defined as an alteration for change in something which makes your work more effective and better. In D3.js, you have different methods that help you to change the style and the content of the elements. These methods are style(), attr(), and html().
Here, we have a detailed description of the above methods with an example.
html() Method
This specific method is used to choose the content of affixed or selected elements of the HTML document.
Example
Here, we have an example to clarify the above method given below.
<!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> </head> <body> <div class = "class3">Hello User!</div> <script> d3.select(".class3").html("Hello User! <span>from D3.js</span>"); </script> </body> </html>
Output
After the successful execution of the above code, you will get the following output:
style() Method
The style() method helps to fix the style property of affixed or selected elements of the HTML document.
Example
Here, we have an example to clarify the above method given below.
<!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> </head> <body> <div class = "class4">D3.js is User Friendly! </div> <script> d3.select(".class4").style("color", "Purple"); </script> </body> </html>
Output
After the successful execution of the above code, you will get the following output:
attr() Method
The attr() method helps to add or update the affixed elements or selected elements of HTML document.
Example
Here, we have an example to clarify the above method given below.
<!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> </head> <body> <div class = "class5"> D3.js is User Friendly! </div> <script> d3.select(".class5").attr("style", "color: magenta"); </script> </body> </html>
Output
After the successful execution of the above code, you will get the following output:
Classed() Method
The method allows you to establish the “class” attribute of an HTML element. In HTML, a single element may have more than one class, so you must be concern about it during the assignment of the class to an HTML element. The classed() method helps you to manage the multiple classes for the HTML element.
Class Operations
Add class
For adding a class, the second parameter of the classed() method must be true, as shown in the below code:
d3.select(“ .class2”).classed(“class3”, true);
Toggle class
For flipping a class to the adverse state, discard the class if it is already enduring or add the class, if it doesn’t endure yet. You can do it as shown in the below code:
var element1 = d3.select(“.class2”) element.classed(“class3”, !oneBar.classed(“class3”));
Remove class
For removing a class, the second parameter of the classed() method must be false, as shown in the below code:
d3.select(“.class2”) .classed(“class3”, false);
Check class
For checking the presence of the class, first, you have to abstain the second parameter and pass the name of the class. If the class endures, it returns true; otherwise, it returns false. It is shown in the below code:
d3.select(“.class2”) .classed(“class3”);
The above code will return true if and only if any element selection contains the class. You can use d3.select for the selection of single element.
selectAll() Method
The above method helps you to choose the multiple elements in the HTML document. In the select() method, you have to choose the first element, but in the selectAll() method, you have to choose all the elements that are similar to the selector string. If the selection is not matched with the selector string, then it will return an empty string.
You can also use affixing modifying methods such as html(). text(), attr(), classed(), style(), and append(), etc., in selectAll() method. In this case the methods affect all the matching element.
Example
Here, we have an example given below to understand the concept of the above method.
<!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> </head> <body> <h2 class = "class1">Message</h2> <div class = "class1">Hello User!</div> <script> d3.selectAll(".class1").attr("style", "color: green"); </script> </body> </html>
Output
After the successful execution of the above code, you will get the following output:
In the above-given snippet, the attr() method covers both tags <h2> and <div> tag, and the color is also applied on both tags.