Get started with d3-selection CDN

BSD-3-Clause licensed

D3-selection: Select, manipulate document elements for data visualization in D3.js.

Tags:
  • d3
  • d3-module
  • dom
  • selection
  • data-join

Stable version

Copied!

How to start using d3-selection CDN


<!DOCTYPE html>
<html>
<head>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="https://cdn.cdnhub.io/d3-selection/3.0.0/d3-selection.min.js"></script>
  <style>
    #chart {
      width: 420px;
      height: 420px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <svg id="chart"></svg>
  <script>
    const svg = d3.select('svg');
    const rect = svg.append('rect')
      .attr('x', 50)
      .attr('y', 50)
      .attr('width', 100)
      .attr('height', 100)
      .attr('fill', 'steelblue');

    const text = svg.append('text')
      .text('Hello D3!')
      .attr('x', 150)
      .attr('y', 150)
      .attr('fill', 'white');

    d3.select(rect)
      .on('click', function() {
        text.text('You clicked the rectangle!');
      });
  </script>
</body>
</html>

All versions