Guide on incorporating d3 axis labels within <a> elements?

Issue at Hand:

I am working with a specific scale

var y = d3.scalePoint().domain(['a','b','c']).range([0,100]);

I have successfully created an axis for this scale

var y_axis = svg.append("g").attr("class", "axis").call(d3.axisLeft(y));

My current focus is on how to turn the ticks into clickable links

Challenges Faced:

The initial process seems uncomplicated 

d3.selectAll('.tick').on('click', (d) => open_link_related_to(d))

However, my goal of allowing the links to remain functional even after downloading an SVG version of the plot introduces complexity. The approach would require something like: 

d3.selectAll('.tick').insert("a").attr("xlink:href", (d) => text_link_related_to(d))

Nevertheless, the use of insert does not neatly wrap the tick within the <a> element -- it inserts below instead. Is there a way to achieve this wrapping with tickformat or alternative techniques?

javascriptd3.jssvg

Answer №1

In my opinion, the most polished and natural way to achieve this is by utilizing the each() function. While it is possible to use tickFormat(), it can feel a bit clunky.

By leveraging the each() method, we have the ability to target all <text> elements within the axis, select their parent containers (which are <g> elements), add an <a> element to these parents, and then move the this reference (representing the text itself) into the newly created <a> tag:

d3.selectAll(".tick text").each(function(d) {
  const a = d3.select(this.parentNode).append("a")
    .attr("xlink:href", "https://www." + d + ".com"); // customize this URL for your needs
  a.node().appendChild(this);
});

Feel free to check out this interactive demonstration below (please note that the Stack snippet does not support external links):

const w = 500,
  h = 100;

const svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

const scale = d3.scalePoint()
  .domain(['google', 'stackOverflow', 'amazon'])
  .range([50, w - 50]);

const axis = svg.append("g")
  .attr("transform", "translate(0,50)")
  .call(d3.axisBottom(scale));

d3.selectAll(".tick text").each(function(d) {
  const a = d3.select(this.parentNode).append("a")
    .attr("xlink:href", "https://www." + d + ".com")
    .attr("target", "_blank");
  a.node().appendChild(this);
})
<script src="https://d3js.org/d3.v5.min.js"></script>

For a working example with clickable links, you can explore the following JSFiddle link: https://jsfiddle.net/xmtdfcks/

If you inspect the generated ticks, you should observe markup similar to the following structure:

<g class="tick" opacity="1" transform="translate(250.5,0)">
    <line stroke="#000" y2="6"></line>
    <a href="https://www.stackOverflow.com" target="_blank">
        <text fill="#000" y="9" dy="0.71em">stackOverflow</text>
    </a>
</g>

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

Can values be transferred from an ng-repeat to a JavaScript function?

I am facing an issue with this segment: <tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit"> <td>{{data.name}}</td> ...

javascriptangularjsbootstrap-modal

How can JavaScript routes be used to apply specific code to multiple pages on a website?

Can you provide guidance on how to run the same code for multiple pages using routes? Below is an example I am currently exploring: var routeManager = { _routes: {}, // Collection of routes add: function(urls, action) { urls.forEach(fun ...

javascriptjqueryroutes

Using AJAX to refresh a div upon submitting a form, instead of reloading the entire page

My SQL database generates a table that remains hidden until the search button is clicked to display the results. I want to use ajax to update the table without refreshing the entire page. Currently, when the page refreshes, the table reverts back to being ...

javascriptcssajaxhtml

Importing the isPropertyUpdated method in Angular 4

My challenge lies in utilizing the isPropertyUpdated function within Angular 4. However, I have encountered a roadblock as Angular 4 does not facilitate deep imports. An example of an import that fails to work on Angular 4 is: import {isPropertyUpdated} ...

javascriptangulartypescript

Unusual behavior of middleware in express 4 causing a strange dynamic effect

I've encountered an issue where a dynamically created middleware in an Express 4 route is not getting called and causing a timeout. 'use strict'; var bodyParser = require( 'body-parser' ); var logger = require( './logger&apo ...

javascriptnode.jsexpress

After logging in successfully, the React app needs a hard refresh to update the

I'm encountering a debugging challenge and would appreciate any assistance from the community. I've been working on my first React app and successfully implemented a Login feature, but after a user logs in, they have to hard refresh their browser ...

javascriptnode.jsreactjsauthenticationreact-redux

Creating a responsive image within a panel using Bootstrap

I've been struggling to make a responsive image fit inside a panel while maintaining its aspect ratio and ensuring none of it gets cut off. I've attempted various CSS tweaks with no success. My setup involves Bootstrap along with React.js using r ...

javascripthtmlcsstwitter-bootstrapreactjs

Is this the proper formatting for JavaScript code?

Having trouble changing the CSS of elements that match b-video > p with an embed element using JQuery. Here's my code: $('div.b-video > p').has('embed').attr('style','display:block;'); Can anyone help me ...

javascriptjquery

Having trouble rendering a dynamic table with JavaScript utilizing a JSON object

I am struggling to retrieve data in JSON format and display it in a table. Despite trying various methods, I have been unable to make it work. Below is the code for this function. Can someone please assist me in identifying what is wrong with it? As of now ...

javascriptjqueryarraysjson

redactor.js: Disable backspace functionality when cursor is at the start of a div-container

Currently, I am working with the redactor.js editor that utilizes editable div containers. A challenge I have encountered is when multiple contenteditable containers are nested; deleting content using the backspace button can inadvertently delete the entir ...

javascriptjquerycursor

How can a pop-up be positioned to appear in the right bottom corner using jQuery

Is there a way to position a pop-up at the bottom right corner of the window? I have code that centers the pop-up in the window, but I'm looking to place it specifically at the bottom right corner. $(id).css('top', winH - $(id).height()); ...

javascriptjquery

Design cards in a particular sequence using either bootstrap or CSS

I am currently developing a blog website and I need assistance with arranging the cards in this specific order: https://i.sstatic.net/Ffpcb.png Despite my efforts using Bootstrap, I am unable to achieve the desired layout. Here is the code I have so far: ...

javascripthtmlcssbootstrap-5

Continue to run upon clicking the button in the Document Object Model

I want the code to constantly change instead of executing only once. By default, the button has a dark mode for text and the background color is pink. When you click the button, the background color changes to black and the text in the button turns into li ...

javascripthtmldom

What is the method to access and examine the attributes of a range in Office.js?

I am encountering an issue while attempting to retrieve the values from cell B2 and create a conditional statement based on those values. Despite my efforts, I continue to receive an error message without any clear understanding of its cause. Please refe ...

javascriptoffice-jsoffice-addins

expanding the input and duplicating the outcomes

I'm attempting to clone and add values to results in my project. Here's the link to what I have so far: http://jsfiddle.net/QNP3r/175/ Currently, it is functioning adequately with a table element. However, I'd like to make it work with a di ...

javascriptjqueryhtmlappend

JavaScript toggle display function not functioning properly when clicked

I've been attempting to create a drop-down list using HTML and JavaScript, but for some inexplicable reason, it's just not functioning as expected despite scouring through countless tutorials on YouTube. Below is the snippet of code that I'm ...

javascripthtml

Expanding on the nested document in mongoose

I have been working on setting up a nested mongoose document configuration in the following manner: models/data.js var mongoose = require('mongoose'); var addresses = new mongoose.Schema({ "street": String, "city": String, "state": Stri ...

javascriptjquerynode.jsmongodbmongoose

Using console.log as an event listener

Check out this fiddle for reference: http://jsfiddle.net/calvintennant/jBh3A/ I am interested in utilizing console.log as an event listener: badButton.addEventListener('click', console.log); However, the fiddle demonstrates that this approach ...

javascript

Explain the inner workings of the setTimeout() function in JavaScript

My goal is to create a line in my code by placing points according to the line equation and adding a 100 millisecond delay before each point is displayed. However, when I try to run the code, it seems to wait for some time and then displays all the points ...

javascripthtmlcsssettimeout

What is the best way to access and manipulate data stored in a Firestore map using React?

In my Firestore database, I have a field with map-like data: coordinates:{_01:"copper",_02:"gold",_03:"iron"} When viewing this database in the Firestore admin panel, it appears like this: pic However, when attempting to list items using the following c ...

javascriptreactjsgoogle-cloud-firestore