en/docs/d3js/data-binding

Data binding in D3.js is a powerful feature that allows you to link the data to the DOM elements, making it easier to manipulate and update the UI in response to changes in the data. Below are some key concepts and examples of how data binding works in D3.js.

Data Binding Concepts

Selection: Selecting DOM elements and binding data to them.
Enter Selection: Elements that are not in the DOM yet.
Update Selection: Elements that are already in the DOM.
Exit Selection: Elements that are in the DOM but no longer match the data.

Basic Data Binding Example

Here is a simple example of how to bind data to a set of SVG circles:

const data = [30, 20, 50, 10];

const svg = d3.select('svg');

// Bind data to the circles
const circles = svg.selectAll('circle')
  .data(data)
  .enter()
  .append('circle')
  .attr('r', d => d)
  .attr('cx', d => 50)
  .attr('cy', d => 50);

// Update the circles
circles
  .attr('fill', 'blue');

// Add more links to D3.js documentation
For more detailed information on data binding, check out the [D3.js Data Binding documentation](/en/docs/d3js/data-binding).

Data Binding with Enter, Update, Exit

Data binding can be used with the enter(), update(), and exit() methods to manipulate the DOM elements based on the data:

// Enter
const enterSelection = svg.selectAll('circle')
  .data(data)
  .enter()
  .append('circle');

// Update
const updateSelection = enterSelection.merge(svg.selectAll('circle'));

// Exit
updateSelection.exit().remove();

D3.js Data Binding with Enter, Update, Exit

Conclusion

Data binding in D3.js is a fundamental concept that allows you to create dynamic and interactive visualizations. By linking data to the DOM, you can easily update and manipulate the visual representation of your data.

For more information on D3.js and data binding, visit the D3.js website.