.select()

The .select() method retrieves the first element that matches the given selector. A selector string is the singular parameter passed to the method. The method interacts with HTML or XML elements in a webpage to return the selected element. It follows the CSS selector syntax.

Syntax

const circles = d3.select(selector) // Selects the elements

• circles: A variable that stores the return value of the .select() method. -'svg': A string passed to the .select() method that returns that element. In this case, the svg element.

Example

The HTML code below for the SVG element is selected through the script.

<svg width="300" height="150"></svg>

The code below represents a dataset containing the values to be plotted wherein the first SVG element is selected using the select method. It further shows how to plot the circle on the position fetched from the dataset.

const dataset = [
  [50, 80],
  [120, 30],
  [200, 100],
];

// Selecting existing or creating new SVG elements
const circles = d3
  .select('svg')
  .selectAll('circle') // Select all existing circle elements
  .data(dataset); // Bind the dataset to the selection

circles
  .enter()
  .append('circle') // Append a circle for each data point that doesn't have a corresponding circle
  .attr('cx', (d) => d[0]) // Set the x-coordinate based on the data
  .attr('cy', (d) => d[1]) // Set the y-coordinate based on the data
  .attr('r', 10); // Set the radius for all circles

// Example of updating existing circles based on the updated dataset
circles.attr('fill', 'blue');

// Example of removing circles for data points that no longer exist
circles.exit().remove();

This example gives the following output: