score:7
the main difference with grouping is that the second argument to your function (i) is the within-group index rather than the within-selection index.
remember the index passed in to any attr, style, etc. functions in d3?
...
.attr('something', function(d, index) {
// major gymnastics with d and index
}
so when you do a selectall, the index starts from 0 for each group.
so, if you do two chained selectalls where the first (group) levels are rows (tr) and the second (child) levels are cells (td), you'd have the following passed in as indices for a 2 rows x 3 cells table
0, 1, 2, 0, 1, 2
instead of
0, 1, 3, 4, 5, 6
which is what you'd expect when you select just 6 nodes with a single selectall.
the following snippet of code illustrates this
d3.selectall("#a tr").selectall("td").text(function(d, index) {
return index;
})
d3.selectall("#b td").text(function(d, index) {
return index;
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
grouped cells (i.e. 2 selectall)
<table id="a">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
ungrouped cells (i.e. 1 selectall)
<table id="b">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
the first animation on the page you linked to (http://bost.ocks.org/mike/selection/) illustrates this pretty well - here's a marked up version of the same
Source: stackoverflow.com
Related Query
- D3.js - how selections work - Need clarification on Mike's article
- d3: How to properly chain transitions on different selections
- How to create floor plans that work nice with mobile and desktop browsers?
- How does DOM Node cleanup work in d3?
- How to make data() key function to work with TypeScript?
- Reusable charts in d3: how do the create and update selections work?
- Selections in D3: how to use parentNode.appendChild?
- How does d3 V4 d3.stratify work with a tree?
- How would d3.js difference chart example work with json data?
- How do I grab only the things I need in D3 v4?
- d3.selectAll enter exit of nested key value pairs -- aka: how do array selections work?
- How does `Import Native` work in Elm
- How to save d3 selections in an array for later use D3.js?
- How to make nvd3 work in Internet Explorer 8?
- How can I merge or join d3 selections from different d3.selects?
- How to convert JSON into something that d3.js can work with
- how exactly does event handling and filtering work in dc.js?
- How do I get $rootScope.$emit() and ng-show to work together via a D3 click event?
- How does 'chart' work in d3.js example code?
- How to structure nested nodes that need updating in d3 v4 force layout?
- How to generate parent child relation data from networkx to work with d3.js?
- How to make a chart in D3 work in node.js
- With d3.js, how do you modify corresponding nodes when you have multiple selections for the same data?
- How does double bracket parameter work in D3?
- How do I get my two codes to work so that the D3 works all the time
- How does the data binding work in d3.js?
- How to work with CSV data in D3
- How d3 selection.exit().remove() work
- How to use d3 filter and update function to toggle between data selections
- How does d3.csv() work without non-arrow functions?
More Query from same tag
- Combine multiple events in D3
- Change d3 force layout link style to match d3-tree look
- D3.JS Delete points with reindexing both points and segments arrays
- d3.js number of days between two dates
- d3's pinch-to-zoom not working in IE/Edge?
- d3 highlighting nodes on mouseover causes unexpected behaviour when mouse taken off of svg space
- How to guarantee old data is in d3's exit selection
- How to draw line plus bar chart using highcharts/d3.js or any other chart library?
- SVG path element .transition() - where to add?
- Change color of selected li option with D3/JavaScript
- trying to generate bar chart in d3 using object-oriented approach
- Identifying columns by position rather than name
- How to assign consistent colours to node groups in Force Network d3.js
- code failing with $ not defined: Uncaught reference error and Uncaught TypeError: Cannot read property 'getAttribute' of null
- SVG D3.js append element to SVG g:circle on text mouseover
- d3js with django/python modify csv file
- Unable to Zoom d3 techanjs
- dimple.js filter x axis with date range
- Catch undefined TypeError from use of 'eval' in Angular?
- Why is this svg and array initiated multiple times in angular?
- D3 v4 Multi line chart Brush Issue NaN when moving brush
- d3js svg not visible in chrome
- cleaning axis in dynamic charts in dimple.js
- D3.js cannot render my circles from a json file
- Weird text behaviour in d3js after update function
- d3 world map with country click and zoom almost working not quite
- Scope issue between jQuery request and d3.js
- Summing based on multiple rows
- TypeError: string is undefined (var c, p, i = 0, n = template.length, m = string.length;)
- mouse over event on axis label d3.js javascript