D3 Building Blocks #2: Using D3 to Style Elements

Using D3 to Style Elements

Now that we can select, add and remove elements from the DOM using D3, we can use additional methods to style those elements. We'll learn how to use the style() and attr() methods in this post.

style()

The style() method allows us to apply inline styling to a selection (or selections) we have made using the select or selectAll methods. This method takes two arguments: We first need to identify the name of the CSS property that we would like to add or change, and then specify the value of the change we are trying to make.

style() Syntax Examples

d3.select("p")
  .style("color", "red")

// OR //

let p = d3.select("p")

p.style("color", "green")
// Selects the <p> tag, and sets the text color to red

In the first example above, we are stringing the style method onto the selection method. Alternatively, we can save the selection to a variable, and call the style method on that variable, like the second example.

With either approach, we can add multiple styles to the same selection, as shown below.

d3.selectAll("h1")
  .style("color", "blue")
  .style("font-family", "Times New Roman")
  .style("font-size", "30px")
  .style("text-align", "center")
// Selects all of the <h1> elements, and sets the font to red, Times New Roman, 30px, and centers the text.

Beyond styling text, we can use the style() method to add styling to other elements such as shapes, lines, and areas. For example:

d3.select("span")
  .style("background-color", "yellow")
// selects the <span> element and applies a background color of yellow

d3.selectAll("circle")
  .style("fill", "purple")
//selects all of the circles and applies a purple fill

attr()

Similar to the previous method, the attr() method allows us to apply inline styling to specific attributes. As we start working with data in future posts, we'll be using this method to apply attributes to elements based on the values in our data. For now, we'll get comfortable with the syntax by using attr() to set basic attributes such as class names and id names.

Just as with style(), the attr() method takes in two arguments: the name of the attribute we are trying to set, and the value of that attribute.

attr() Syntax Examples

d3.selectAll("div")
  .attr("class", "card")
// Selects all of the <div> tags, and gives them each a class of "card"

d3.select("div")
  .attr("id", "root")
// Selects a div, and assigns it the "root" id attribute

As we will explore in future posts, there are many more attributes we can set using the attr() method once we start working with shapes and data, such as height, width, x and y coordinate locations, and radius size. In addition, we will learn how to use callback functions as our second argument in order to dynamically set attributes based on data values, which eventually allows to build complex visualizations using these D3 fundamental methods.

We are just scratching the surface with these methods! Use the resources below for a refresher on CSS fundamentals and styles that can be applied using D3:

MDN Web Docs:

• Fundamental text and font styling

D3 Documentation:

• Modifying Elements attr() and style()