Geek Answers Handbook

How to add tabindex attribute to nvd3 pie chart?

I have a basic pie chart with three wedges. When you click on the wedge of the cake, a tooltip will appear. I intend to use the same functions for the keydown event.

Scenario: when the slice of the pie has focus, the user can press the (ex: enter) key, which will display a hint exactly how the click event occurs.

I realized that this would take 2 steps.

  • Make each click for the pie (.nv-slice) custom by adding the attribute "tabindex = 0"
  • Add an event listener that triggers a tooltip similar to how a click event occurs.

Here is a plunkr that shows the described behavior: http://plnkr.co/edit/7WkFK2LqzDyDmnIt2xlf?p=preview (thanks to @ThanasisGrammatopoulos)

First of all, how to add the tabindex attribute for each wedge? When I try the following code, it does not appear:

d3.selectAll('.nv-slice').setAttribute("tabindex", "0");

Any ideas?

0
source share
1 answer

So,

The function setAttributeis vanilla javascript, so it must be used in a real javascript HTML element.

You have 2 options,

Solution 1

Get the html javascript element using a function each, and then get it from this.

d3.selectAll('.nv-slice').each(function(){
    this.setAttribute("tabindex", "0");
});

Decision 2

, , jQuery ( ) , setAttribute, attr.

d3.selectAll('.nv-slice').attr("tabindex", "0");

, .

+1

More articles:


All Articles