How to retrieve HTML attribute using D3 techniques

Looking to iterate through all rect nodes in the code snippet below:

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

When Console.log is executed, the following is printed: 

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

To access the value of the "name" attribute (which is "UK") of the rect tag, attempting this.name has not been successful. How can this be achieved?

javascriptd3.jssvg

Answer №1

To efficiently retrieve the value of name in D3, one can utilize selection.attr() as a reliable getter:

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

Check out this demonstration:

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>

Essentially, selection.attr() internally employs getAttribute (or getAttributeNS). Hence, it is synonymous with:

this.getAttribute("name")

Explore this example to understand its functionality better:

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can you assign a unique number to each item within the same category in order to differentiate them?

const productData = [ {size: 1180160, category: "Keswick", index: 1}, {size: 1059328, category: "HCOPA", index: 2}, {size: 30720, category: "HCOPA", index: 3}, {size: 493056, category: "Darhan Saluja", index: 4}, {size: 267776, category: "CRSA", index ...

javascriptreactjs

How to use hooks in NETXJS to pass data from a page to a component

Hey there, how are you doing? I am currently working on a project using Next.js and styled components. I am trying to change a string using props in my layout component, where the main content is dynamic per page. Page 'prueba.js' import React f ...

javascriptreactjsnext.js

Developing components with jQuery

I have a JavaScript program that works perfectly when I use the following line of code: li = $("<li data-role='collapsible' data-iconpos='right' data-inset='false'></li>"); However, if I change the above line ...

javascriptjquery

Bringing in More Blog Posts with VueJS

Exploring the Wordpress API and devising a fresh blog system. As a newbie to VueJS, I'm intrigued by how this is handled. The initial blog posts load as follows: let blogApiURL = 'https://element5.wpengine.com/wp-json/wp/v2/posts?_embed&p ...

javascriptvue.jsvuejs2vue-component

Converting a timestamp from PHP in JSON format to date and time using JavaScript

Within the JSON file, there is a timestamp associated with each user login. An example of this timestamp is: timestamp: "1541404800" What steps should be taken to convert this timestamp into date and time format? ...

javascriptjson

The MaterialTable is unable to display any data

After calling the fetch function in the useEffect, my getUsers function does not populate the data variable. I am unable to see rows of data in the MaterialTable as the data structure is in columns. I need help figuring out what I'm doing wrong. func ...

javascriptreactjsmaterial-uimaterial-table

SVG's height attribute not adjusting properly

I am currently working on implementing an SVG sprite sheet using the "symbol" method outlined here. My HTML code is quite straightforward. <svg><use xlink:href="/images/iconSprite.svg#camera"/></svg> Below is a sample symbol extracted ...

csssvgaspect-ratio

Error: Unable to establish connection with local host (::1) on port 50106

I am currently in the process of developing a Discord bot using Node.js and erela.js. However, I encountered an error when attempting to retrieve the server that handles erela: A node error occurred: connect ECONNREFUSED ::1:50106 2020-05-01T21:23:19.367 ...

javascriptnode.js

Charting data from MongoDB with Highcharts column chart

Having trouble creating a column chart with Highcharts in Node.js, fetching data from MongoDB. Specifically stuck on the series option - any help is appreciated. Here's an excerpt of my code in the EJS file: <html> <head> <meta ht ...

javascripthighcharts

NodeJS reports an invalid key length, while C# accepts the key length as valid

Currently, I am in the process of converting Rijndael decryption from C# to NodeJS. The Key (or Passphrase) being used is 13 characters long, while the IV used is 17 characters long. Note: The length choice for both Key and IV is beyond my control Disp ...

javascriptc#node.jsencryptionrijndael

Develop an innovative showcase page showcasing 151 individual profiles with React Router

I am new to using React Router and feeling a bit confused about how to proceed. On my homepage, I have 151 unique monster thumbnails. When a user clicks on a thumbnail, they should be directed to the specific monster's 'show page'. Currently ...

javascriptreactjsreact-router

What sets apart a string constant from a string enclosed in quotation marks? And what techniques exist to transform one into the other?

Calling an asynchronous function: const variable = 'something' await MyAsyncFunction.execute(variable) No output is displayed. But if I change it to: await MyAsyncFunction.execute('something') It works!! Can someone please explain h ...

javascriptnode.jsstring

Guide on converting HTML datetime picker datetime-local to moment format

I am looking to convert an input type : <input type="datetime-local" name="sdTime" id="stTimeID" onChange={this.stDateTime} /> into a specific date format: const dateFormat = 'MM/DD/YYYY hh:mm:ss a'; To achieve this, I need to transfer ...

javascripthtmlreactjsdatetimedatetimepicker

Attempting to transfer a newly created element from one location to another within the document after it has finished

I'm currently updating the design of my website. The currency selector app by Shopify is placed at the bottom, which has caused confusion for my international customers. To resolve this issue, I want to move it to a specific div class called .CSPositi ...

javascriptjquery

What is the process of converting TypeScript to JavaScript in Angular 2?

Currently diving into the world of Angular 2 with TypeScript, finding it incredibly intriguing yet also a bit perplexing. The challenge lies in grasping how the code we write in TypeScript translates to ECMAScript when executed. I've come across ment ...

javascripttypescriptangular

Limiting access in _app.js using Firebase and Redux

In my application, users can access the website without logging in. However, they should only be able to access "/app" and "/app/*" if they are authenticated. The code I have written seems to work, but there is a brief moment where the content of "/app" ...

javascriptreactjsreduxnext.js

Retrieve the value of a variable in a Bootstrap modal using Jade

I am looking to accomplish the following: On my Jade page, I have a for-loop that generates a list of items. Each item has some information displayed through Jade variables and a delete button. When this delete button is clicked, I want a Bootstrap Modal ...

javascriptjquerytwitter-bootstrapexpresspug

Struggling to display a collection of items in React

Below is the code snippet : import React, { Component } from 'react'; import axios from 'axios'; import _ from 'lodash'; import Loader from './Loader'; export default class Main extends Component { constructor(p ...

javascriptreactjsrender

Alter the top property of CSS using JavaScript

Hey there! I'm currently working on a project where I want to gradually change the background when a button is clicked on my website. Below you'll find snippets of JavaScript and HTML code that I'm using for this purpose. Can you take a look ...

javascripthtmlcss

What is the method for accessing extra parameters in the signIn() callback function in [...nextauth]?

As per the Next Auth documentation, it is possible to pass extra parameters to the /authorize endpoint using the third argument of signIn(). The examples provided are: signIn("identity-server4", null, { prompt: "login" }) // always ask ...

javascriptreactjsnext.jsjwtnext-auth