如何向nvd3餅圖添加tabindex屬性？

Question

我有一個帶有3個楔形的基本餅圖。 當您單擊餅圖的楔形時，將顯示工具提示。 我的目的是為按鍵事件提供相同的功能。

場景：當餅圖具有焦點時，用戶可以按下一個鍵（例如：enter），該鍵將准確顯示工具提示的click事件。

我認為這將需要2個步驟。

1. 通過添加'tabindex = 0'屬性，使每個餅狀楔形（.nv-slice）都具有焦點
2. 添加一個事件偵聽器，該事件偵聽器會觸發工具提示，類似於單擊事件的行為。

這是顯示所描述行為的插件： http ://plnkr.co/edit/7WkFK2LqzDyDmnIt2xlf?p=preview（感謝@ThanasisGrammatopoulos）

首先，如何為每個餅形圖添加tabindex屬性？ 當我嘗試以下代碼時，它似乎沒有出現：

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

有任何想法嗎？

Answer 1

所以，

函數setAttribute是一個普通的javascript，因此必須在真正的javascript html元素上使用。

您有2種選擇，

解決方案1

使用each函數獲取javascript html元素，然后從this獲取它。

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

解決方案2

或者，正如我們從jQuery（一個可變的polular庫庫）中了解到的那樣，您可以嘗試查看setAttribute的等效函數是否存在，該函數為attr 。

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

當然，回調函數中的所有內容。