Enter

The enter function is a part of every basic D3 visualization. It allows the developer to define a starting point with attached data. The enter function can be thought of as a section of code that executes when data is applied to the visualization for the first time. Typically, the enter section will follow the selection of a DOM element. Let's walk through an example (http://localhost:8080/chapter-3/example-2.html):

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

Create the SVG container as we did earlier:

svg.selectAll('rect').data([1,2]).enter()

The data function is the way we bind data to our selection. In this example, we are binding a very simple array, [1,2], to the selection <rect>. The enter function will loop through the [1,2] array and apply the subsequent function calls, as shown in the following code:

.append('rect')
.attr('x', function(d){ return...

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

Enter

Learning D3.js Mapping

By : Newton, Oscar Villarreal

Learning D3.js Mapping

By: Newton, Oscar Villarreal

Overview of this book

Enter

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