Найдите имя тега элемента svg с помощью D3

У меня есть несколько тысяч элементов svg rect в качестве узлов и элементов пути svg в качестве ссылок и многих других таких элементов в пользовательском интерфейсе. Из-за некоторых действий пользователя некоторым элементам присваивается определенный класс. Мне нужно найти имя тега элементов, имеющих конкретный класс.

В приведенном ниже коде мне нужно найти точное имя тега элемента, который имеет класс xyz, вместо имени их класса или других значений атрибутов.

d3.selectAll(".xyz").each(function(){
console.info(":::: " + d3.select(this).attr("class"));
})

<script src = "https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg>
<rect class='xyz'  width = "50" height = "50" fill='teal'></rect>
 <line class='xyz' x1 = "0" y1 = "0" x2 = "200" y2 = "200" style = "stroke:rgb(255,0,0);stroke-width:2" />
<svg>

Вы можете использовать d3.selectAll('rect.xyz') для выбора rect с классом xyz. Подробнее здесь d3indepth.com/selections

— 05.06.2018 12:49

На самом деле мне нужно выбрать все элементы, относящиеся к определенному классу, и выполнять операции в соответствии с именем тега, а не выбирать в соответствии с тегом. Спасибо

— 05.06.2018 12:52

javascript html d3.js

05.06.2018 12:41

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 418

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать название тэга.

Вот демонстрация с использованием вашего фрагмента:

d3.selectAll(".xyz").each(function() {
  console.info(d3.select(this).node().tagName);
})

<script src = "https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg>
<rect class='xyz'  width = "50" height = "50" fill='teal'></rect>
 <line class='xyz' x1 = "0" y1 = "0" x2 = "200" y2 = "200" style = "stroke:rgb(255,0,0);stroke-width:2" />
<svg>

Обратите внимание на тот факт, что вы должны вызывать tagName для самого элемента DOM, а не для выбора D3 (отсюда и node()). Следовательно, вы можете использовать просто this:

d3.selectAll(".xyz").each(function() {
  console.info(this.tagName);
})

<script src = "https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg>
<rect class='xyz'  width = "50" height = "50" fill='teal'></rect>
 <line class='xyz' x1 = "0" y1 = "0" x2 = "200" y2 = "200" style = "stroke:rgb(255,0,0);stroke-width:2" />
<svg>

05.06.2018 12:51

Другие вопросы по теме

Возвращающийся вид: неопределенная переменная Laravel

Переключение кнопок навигации при нажатии

Складной навес

Запустите код при прокрутке вниз до определенного раздела

Введите текст типа максимум до 2 цифр

Попытка удалить элемент внутри iframe с помощью javascript, написанного на php

Как удалить вкладку параметров в window.open при открытии PDF / любого файла

Как я могу поставить другой код или не редактируемый код, когда ctrl + shift + i я делаю в браузере

Получение изображений и Divs одинакового размера с помощью flexbox

Фиктивные строки для графиков Google Charts?

Найдите имя тега элемента svg с помощью D3

Ответы 1

Другие вопросы по теме

Похожие вопросы