Creating basic SVG elements

A common operation in D3 is to select a DOM element and append SVG elements. Subsequent calls will then set the SVG attributes, which we learned about in Chapter 2, Creating Images from Simple Text. D3 accomplishes this operation through an easy-to-read functional syntax called method chaining. Let's walk through a very simple example to illustrate how this is accomplished (go to http://localhost:8080/chapter-3/example-1.html if you have the http-server running):

var svg = d3.select("body")
    .append("svg")
    .attr("width", 200)
    .attr("height", 200)

First, we select the body tag and append an SVG element to it. This SVG element has a width and height of 200 pixels. We also store the selection in a variable:

svg.append('rect')
    .attr('x', 10)
    .attr('y', 10)
    .attr("width",50)
    .attr("height",100);

Next, we use the svg variable and append a <rect...

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Learning D3.js Mapping

By : Newton, Oscar Villarreal

Learning D3.js Mapping

By: Newton, Oscar Villarreal

Overview of this book

Creating basic SVG elements

Learning D3.js Mapping

By : Newton, Oscar Villarreal

Learning D3.js Mapping

By: Newton, Oscar Villarreal

Overview of this book

Creating basic SVG elements

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access