Exploring X3DOM nodes using d3.js

I'm attempting to loop through X3DOM nodes in D3.js, but I'm encountering an issue.

Check out the code snippet below:

  var disktransform = scene.selectAll('.disktransform');
  var shape = disktransform
                  .datum(slices)
                  .selectAll('.shape')
                  .data(partition.nodes)
            .enter()
            .append('shape')
                    .attr('class', 'shape')
                    .attr('data-name', function(d, i) { return d.name + ' ' + i; })

  shape
            .append('appearance')
            .append('material')
                    .attr('diffuseColor', function (d, i) { return color(d.name); })
    ;
  d3.selectAll('shape.shape').each(function (d) { console.log(d); d.node().addEventListener('click', function (event) { alert('key'); alert(d.attr('data-name')); }); });

and the error message making reference to HTMLUnknownElement.node(). How can I modify the code above to function correctly with X3DOM?

TypeError: d.node is not a function
    at HTMLUnknownElement.<anonymous> (cross_chart.js:136)
    at d3.js:962
    at d3_selection_each (d3.js:968)
    at Array.d3_selectionPrototype.each (d3.js:961)
    at CrossChart.addPath (cross_chart.js:136)
    at HTMLDivElement.<anonymous> (cross_chart.js:263)
    at d3.js:962
    at d3_selection_each (d3.js:968)
    at Array.d3_selectionPrototype.each (d3.js:961)
    at Array.CrossChart.draw (cross_chart.js:196)
    (anonymous function) @ angular.js:10126
    $get @ angular.js:7398
    $get.Scope.$digest @ angular.js:12669
    $get.Scope.$apply @ angular.js:12915
    done @ angular.js:8450
    completeRequest @ angular.js:8664
    xhr.onreadystatechange @ angular.js:8603
javascriptd3.jsdom-eventsx3dom

Answer №1

It must be 

When working with D3, you can use the following code snippet to select all shapes and add a click event listener to each of them:
d3.selectAll('shape.shape').each(function (d) { console.log(d); d3.select(this).node().addEventListener('click', function (event) { alert('key'); alert(d3.select(this).attr('data-name')); }); });

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

What is the process of exporting a module that has been imported in ES6?

Here are 3 code snippets: // ./src/index.ts const myApp = { test: 1, ... } export default myApp // ./src/app.ts import myApp from './src/index' export default myApp // ./index.vue import { example } from './src/app.ts' console.l ...

javascriptvue.jsecmascript-6vite

Preventing an image from being repeated when using Canvas drawImage() without having to clear the entire canvas

How can I prevent multiple instances of the same image from smearing across the canvas when drawing it? The platforms seem to stick together and not separate properly. Why do I have to clear the entire rectangle for everything to disappear? Does anyone ha ...

javascriptcsshtml

Understanding the application of JSON data can be simplified by following these

I am looking to manipulate dates by either adding or subtracting them, but I am unsure of how to extract the dates from the other data present. var fetch = require('node-fetch'); fetch('https://api.nasa.gov/planetary/earth/assets?lon=100.7 ...

javascriptjsonparsing

Topaz font does not properly display backslashes and certain characters when rendered on Canvas

Who would have thought I'd stumble upon a new challenge on Stack Overflow? But here we are. If there's already a solution out there, please guide me in the right direction. I'm currently developing an interactive desktop environment inspired ...

javascriptcanvasfontstruetype

How can I terminate a parent function in NodeJS when inside a virtual function?

Here is something similar to the code snippet below: var async = require(async) function start () { async.series( [ function (callback) { // do something callback(null, "Done doing something") ...

javascriptnode.jsnode-async

What coding techniques can be used to create dynamic animation of a log stream in javascript/css

When I have a series of events in my browser, I want to display them as a list with a smooth animation effect. As each new event comes in, I'd like the existing items to slide down gracefully, making room for the new event to fade in at the top of the ...

javascriptjquerycssanimationcss-animations

The functionality of window.localStorage.removeItem seems to be malfunctioning when used within an $http

Currently, I am sending a post request to my web service and upon successful completion, I am attempting to remove a token from local storage. Here is the code snippet: $http.post("MyService/MyAction").success(function (res) { if ( ...

javascriptjqueryangularjsajax

Eliminate Redundancy with Knockout.js Copy Prevention

When I combine both ko.js files, one of them ends up being overshadowed by the other. Specifically, the second one stops working while only the first one remains functional. How can I merge these files together to ensure they work properly without any conf ...

javascriptjqueryknockout.js

Transforming the shopping cart with redux-saga

Hey there! I've been working on implementing a shopping cart feature using redux-saga. The current code seems to be functioning properly, but I have some concerns about the way I'm handling the cart state. It looks like I might be mutating the ca ...

javascriptreactjsreduxnext.jsredux-saga

In TypeScript, the catch block does not get triggered

I created a custom pipe in Angular that is supposed to format passed parameters to date format. The pipe contains a try-catch block to handle any errors, but surprisingly the catch block never seems to be executed even when an invalid date is passed. impo ...

javascriptdateangulartypescript

Encountering an issue with Discord JS that says "unable to access property 'content' because it is undefined"

CODE IS BELOW I have recently created a discord bot and included a message file within the events--guild directory. module.exports = (Discord, client, message) => { const prefix = '!'; if(!message.content.startsWith(prefix) || mess ...

javascriptnode.jsdiscorddiscord.js

Is there a simpler way to retrieve data from PHP or to efficiently filter the data once it's been retrieved?

Creating a business directory website involves fetching data from a database. The issue arose when attempting to apply a function uniformly to all boxes, as only the first one with the specified id would function correctly. To address this problem, the fol ...

javascriptphphtml

What causes the error "searchInput" to be undefined?

Currently, I am facing an issue while attempting to search for individuals stored in an array within the Redux store. Whenever I try to execute a search, an error is triggered with the following message: Cannot read property 'searchInput' of und ...

javascriptreactjsredux

Splitting code efficiently using TypeScript and Webpack

Exploring the potential of webpack's code splitting feature to create separate bundles for my TypeScript app has been a priority. After scouring the web for solutions, I stumbled upon a possible lead here: https://github.com/TypeStrong/ts-loader/blob/ ...

javascripttypescriptwebpackcode-splittingts-loader

Using more than one submit button in an HTML form

I am attempting to include multiple buttons on a single form. I would like to perform different actions on the form depending on which submit button is clicked. <script type="text/javascript> $("#<portlet:namespace/>Form").submit(function( ...

javascriptjqueryajaxforms

Learn to display multiple collections of data on a webpage using Node.js and MongoDB

Struggling with displaying multiple collections on my webpage. After extensive research, I keep encountering an error message saying "Failed to look up view in views directory." Here is the code snippet causing the issue: router.get('/', functio ...

javascriptnode.jsmongodbexpress

Ramda Transitioning to a Liberated Style of Programming

Unable to find a suitable resource for this particular issue. I apologize if this question has already been asked, but my attempts to locate the answer have proven fruitless (perhaps due to a lack of effective search methods). I've developed a functi ...

javascriptramda.js

jQuery's load method is not responsive when prompted via load

I recently came across a unique voting system on that caught my eye. The code they used is as follows: $(".vote").click(function() { $(this).load($(this).attr('href')); console.log("voted"); return false; }); accompanied by this H ...

javascriptjqueryajax

"Guidance on jQuery syntax: Use a textbox to filter out and hide select options with each keystroke

Is there a way to modify my existing code so that it can show or hide elements based on a filter condition, specifically for Internet Explorer? I want to wrap the unmatched elements in a SPAN tag and hide them if the browser is IE, and vice versa by remo ...

javascriptjqueryhtmlsyntax

develop a real-time website availability tracker using Node.js

I am interested in developing an uptime monitor using NodeJS and MongoDB. The plan is to set up a cron job in NodeJS that will collect data and store it in MongoDB. Specifically, if the response status code of a website is not equal to 200, then that infor ...

javascriptnode.jsmongodbmongoose