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.

← Prev Next →