A chart directive

Next, we want to create a reusable and testable chart directive. The first question that comes into one's mind is where to put which functionality? Should we create a svg element as parent for the directive or a div element? Should we draw a data point as a circle in svg and use ng-repeat to replicate these points in the chart? Or should we better create and modify all data points with D3.js? I will answer all these question in the following sections.

A directive for SVG

As a general rule, we can say that different concepts should be encapsulated so that they can be replaced anytime by a new technology. Hence, we will use AngularJS with an element directive as a parent element for the visualization. We will bind the data and the options of the chart to the private scope of the directive. In the directive itself, we will create the complete chart including the parent svg container, the axis, and all data points using D3.js.

Let's first add a simple directive for...

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.

Data Visualization with D3 and AngularJS

By : Erik Hanchett, Christoph Körner

Data Visualization with D3 and AngularJS

By: Erik Hanchett, Christoph Körner

Overview of this book

A chart directive

A directive for SVG

Data Visualization with D3 and AngularJS

By : Erik Hanchett, Christoph Körner

Data Visualization with D3 and AngularJS

By: Erik Hanchett, Christoph Körner

Overview of this book

A chart directive

A directive for SVG

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