How to Start a D3.js Layout

How to Start a D3.js Layout

The easiest way to create a D3.js layout is to start with an <svg> element that acts as the container (i.e. backdrop) for your chart. Simply add something like:

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

To whatever width or height you choose. Then you can add other elements within it, for example:

      <svg width="300px" height="300px">
          <rect x="20" y="20" width="20px" height="20" rx="5" ry="5" />
          <rect x="60" y="20" width="20px" height="20" rx="5" ry="5" />
          <rect x="100" y="20" width="20px" height="20" rx="5" ry="5"/>
      </svg>

Leave a Comment