Attributes and Styles

Setting Attributes, Styles and Text

attr(), style(), text(), classed() and property() set attributes, inline CSS, text, classes and DOM properties. A value is a constant or a function called per element with the datum d, the index i and the array nodes, and with this as the element (write a function, not an arrow, to use this). call(fn) passes the selection to a function, which is how axes attach themselves (Axes and Legends).

Constant and per-element values on an existing listHTMLLive

<script src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"></script>
<style>li { display: inline-block; margin-right: 12px } .out { text-decoration: line-through }
</style>
<ul id="books" style="font: bold 15px Arial; padding: 0">
  <li>The Quiet Harbor</li><li>Patterns of the Deep Web</li><li>Salt and Saffron</li>
  <li>Small Steps to Big Summits</li><li>The Clockmaker's Paradox</li><li>Gardens in Glass</li>
</ul>
<script>
  const palette = ['#1f5f8b', '#5b3f99', '#e09a10', '#3f7d3a', '#b5452f', '#2a9d8f'];
  d3.selectAll('#books li').style('color', (d, i) => palette[i])
    .attr('title', (d, i, nodes) => `Book ${i + 1} of ${nodes.length}`)
    .classed('out', function () { return this.textContent === 'Salt and Saffron'; });
</script>

Browser output of Listing 6.5 — Browser output of 5

A class strikes through the sold-out cooking book, keeping the look in CSS. Use attr for SVG geometry and classes for paint a stylesheet may override, since an inline style beats every rule except !important.

MENU