getElementsByClassName/querySelectorAll 関数で要素にアクセスしようとしていますが、結果から要素を取得しようとするとどうなるかわかりません。
var cells = document.getElementsByClassName('mapAtt');
console.log(cells); // [item: function]
console.log(cells[0]); // undefined
console.log(cells.item(0)); // none
console.log(cells.length); // 0
var cells2 = document.querySelectorAll(".mapAtt");
console.log(cells2); // [item: function]
console.log(cells2[0]); // undefined
console.log(cells2.item(0)); // none
console.log(cells2.length); // 0
この 2 つの関数の戻り値は配列ではなく nodeList であると読みましたが、item 関数を使用しても機能しません。
セル 1 とセル 2 は、22 個の要素を持つリストである正しいことを示していますが、array/nodeList メソッドでそれらにアクセスすることはできません。
要素はd3.jsで作成しましたが、間違いを言わなければ骨の折れるHTML DOM要素を作成することになっています。では、なぜうまくいかないのでしょうか。