Tutorialsteacher

Follow Us

Articles
  • C#
  • C# OOP
  • ASP.NET Core
  • ASP.NET MVC
  • LINQ
  • Inversion of Control (IoC)
  • Web API
  • JavaScript
  • TypeScript
  • jQuery
  • Angular 11
  • Node.js
  • D3.js
  • Sass
  • Python
  • Go lang
  • HTTPS (SSL)
  • Regex
  • SQL
  • SQL Server
  • PostgreSQL
  • MongoDB
  • D3.js - Get Started
  • What is D3.js
  • Web Standards
  • D3 - Environment Setup
  • D3 - DOM Selection
  • D3 - DOM Manipulation
  • D3 - Method Chaining
  • D3 - Function of Data
  • D3 - Event Handling
  • D3 - Animation
  • D3 - Data Binding
  • D3 - Data Loading
  • D3 - Create SVG Elements
  • D3 - Create SVG Chart
  • D3 - Scales
  • D3 - Axes
  • D3 - Bar Chart
  • D3 - Animated Bar Chart
  • D3 - Pie Chart
Entity Framework Extensions - Boost EF Core 9
  Bulk Insert
  Bulk Delete
  Bulk Update
  Bulk Merge

Method Chaining in D3

In the previous sections, we wrote D3 functions 'connected' to each other with dots. Does that make you curious? This is called "chain syntax". If you are familiar with JQuery, you might be familiar with the following.

$("#myDiv").text("Some text").attr("style", "color:red")

D3 uses a similar technique where methods are chained together using a period.

d3.select("body").append("p").text("Hello World!");

The output of the first method is passed as an input to the next method in the chain.

Think of it as a filtered channel. The first method filters out content and provides a reference to the filtered content to the next method, the next method further filters and passes on the reference to the next method and so on.

Now, we could have written our D3 code without using chaining as below.

var bodyElement = d3.select("body");

var paragraph = bodyElement.append("p");

paragraph.text("Hello World!");

But the method chaining is a shorter and cleaner way of achieving this.

d3.select("body").append("p").text("Hello World!");

In our example above,

d3.select("body")

From the DOM, D3 selects the body element and returns a reference of the selection to the next method in the chain which is append().

append("p")

From the filtered content that it received, the append() method works only on the reference element(s) it received. In this case, it is the body element. Now, it creates and appends a new<p> element to the element that it received and returns this new element to the next method in the chain.

text("Hello World!")

The text() method receives the paragraph element from the previous method and adds the text provided to it.

Note that you can also write the chained methods in a more readable format by writing each method on a new line. JavaScript is ok with this! And it certainly improves readability.

d3.select("body")
  .append("p")
  .text("Third paragraph");
TUTORIALSTEACHER.COM

TutorialsTeacher.com is your authoritative source for comprehensive technologies tutorials, tailored to guide you through mastering various web and other technologies through a step-by-step approach.

Our content helps you to learn technologies easily and quickly for learners of all levels. By accessing this platform, you acknowledge that you have reviewed and consented to abide by our Terms of Use and Privacy Policy, designed to safeguard your experience and privacy rights.

[email protected]

ABOUT USTERMS OF USEPRIVACY POLICY
copywrite-symbol

2024 TutorialsTeacher.com. (v 1.2) All Rights Reserved.