score:1
I don't think D3 provides this jQuery like selector. You can probably do it through native dom selectors.
var parent = d3.select('.child').node().parentNode.parentNode
Then you can retrieve the data for this node like so
d3.select(parent).datum()
score:5
The easiest way to find a parent element matching some selector string is by using the Element.closest()
method:
Starting with the
Element
itself, theclosest()
method traverses parents (heading toward the document root) of theElement
until it finds a node that matches the provided selectorString.
To keep it within the D3 universe, you can make use of the selection.select()
method, which accepts a selector funtion as its argument:
If the selector is a function, it is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodeson-topic). It must return an element, or null if there is no matching element.
Calling this method on the child's selection you are getting access to the child's DOM element which is referred to by this
. From there on you can easily find the parent element you are after:
const parent = child.select(function() {
return this.closest(".parent"); // Get the closest parent matching the selector string.
});
Have a look at the following snippet for an executable demo:
const child = d3.select(".child"); // Select the child.
const parent = child.select(function() {
return this.closest(".parent"); // Get the closest parent matching the selector string.
});
console.log(parent.node()); // <div class="parent">…</div>
<script src="https://d3js.org/d3.v5.js"></script>
<div class="parent">
<div class="stepson">
<div class="child">
Wassup Fatso?
</div>
</div>
</div>
Source: stackoverflow.com
Related Query
- How do I select a specific parent using d3?
- Using d3 - How do I select specific data from array to highlight when I click a button?
- How to select parent element of current element in d3.js
- How to generate random colors in an specific range using D3?
- How to extend number of options in select tag using d3?
- How to select and deselect a svg line and change its color on selection and deselection using d3.js and javascript , jquery?
- How to select a specific d3 node group element
- How do you fill specific countries using d3.geo with canvas?
- how to adjust parent circle radius using d3js pack layout
- D3 node update - how to select a specific text element among multiple ones?
- How to select DOM elements with number value id using D3
- D3 how to select text elements given a specific id attribute
- Creating graph inside a specific leaflet popup using select by id
- How do i expand specific nodes on a collapsible tree using d3.js?
- How to change json file in d3.js and update chart using select options
- How to select all types of child element inside an SVG using d3.js
- How to insert an element in a very specific place using D3
- How to read specific attribute from external json file using d3.js?
- How to select an existing SVG container in D3 without creating that container using D3?
- How to create a paragraph when option changes in a select tag using d3.js?
- How can you select and highlight all points on a line(s) using d3?
- using d3.js, how can i select a particular <g> which has particular text in <text> as its child?
- how to access specific data in an array using D3.js v5 for a stacked bar graph tooltip
- How to select multiple svg elements using d3js
- How to select single class name from multiple using d3 js?
- How to get parent node from child in json using d3js as Force Layout?
- How to select specific element from g and transform it
- How to create multi color vertical bar chart in d3.js using specific json data?
- How do I select one group of values from dataset to plot a linechart using D3.js and not the whole dataset
- How can I select a link using d3.select?
More Query from same tag
- Binding nested data to box plot / rectangles
- Why aren't the bars on my graph D3.js appearing in the correct order?
- D3v4 force directed graph - localStorage disconnects links and nodes
- D3 Treemap v3 to v4
- Change curved lines to straight lines
- Date format issue in d3 js
- D3.js Moving elements in the svg structure
- D3 getting data from multiple column CSV
- Rails 4: "//= require_tree ." in application.js doesn't include my js file in /app/assets/javascripts
- Using angular function binding inside .html() in d3
- html in d3.js text tag
- Change the color of the link when the object is selected
- How to Create a path in svg for d3 brush
- D3 - Appending SVG based on JSON Data
- How to draw circles with radii given in kilometers accurately on world map
- D3js first tick label is missing
- Label above d3 chart itself
- How to make a unique line thinner using NVD3
- D3: uncaught exception: Object
- How to sort a dc.js pie chart by its values instead of by its keys
- D3, Typescript - Argument of type 'this' is not assignable to parameter of type 'BaseType'
- D3 pie chart not updating
- D3.js / NVD3.js does not display correct values
- How to get mouseenter function to display data
- Set dynamic regions for each y axis group
- Multiple simple graphs on one page d3.js
- Tweening numbers in D3 v4 not working anymore like in v3
- script error - requireJS
- SVG: why does external css override inline style for text?
- Restricting d3.js zoom to container