Adding a detail view and interactivity

The next example adds a details directive to the page and also interactivity such that when a bar is clicked, the details directive will display the appropriate data for the selected bar.

To achieve this interactivity, the bar graph directive is modified so that it produces an action that can be monitored by other parts of the AngularJS application. This action will be to set a selectedItem property on the model, which other controllers or directives can watch for changes and then take action.

The web page

The web page for this example is contained in 03_with_detail.html. The content included differs slightly, in that we will include a new implementation of our <bars-view> directive in directives/bars_with_click.js ...

Get D3.js By Example now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.