Атрибут доступа D3 HTML

Question

У меня есть следующий код для обхода всех прямоугольных узлов:

d3.selectAll("svg g rect")
    .on('mouseover', function (d) {
        console.log(this);
}); 

Печать Console.log:

<rect class="cls" name="UK" style="fill: #fdb462;" transform="translate(52 50)" x="805.625" y="0" width="13.75" height="229.018" >...</rect>

Как получить доступ к атрибуту имени (имеющему значение "UK") прямоугольной метки? Я пытался this.name, но это не работает.

Answer 1

Идиоматический способ D3 для получения значения name использует selection.attr() в качестве получателя :

d3.select(this).attr("name")

Вот демо:

d3.select("rect")
  .on('mouseover', function(d) {
    console.log(d3.select(this).attr("name"));
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg>
  <rect class="cls" name="UK" style="fill: #fdb462;" transform="translate(52 50)" x="0" y="0" width="200" height="100"></rect>
</svg>

Внутренне selection.attr() использует getAttribute (или getAttributeNS). Следовательно, это эквивалентно:

this.getAttribute("name")

А вот демо:

d3.select("rect")
  .on('mouseover', function(d) {
    console.log(this.getAttribute("name"));
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg>
  <rect class="cls" name="UK" style="fill: #fdb462;" transform="translate(52 50)" x="0" y="0" width="200" height="100"></rect>
</svg>