score:4
The explanation here is simple, and it was the subject of this answer of mine: the third argument has changed from D3 v3 to D3 v4.
This is the problematic line:
.attr("y", function(d,i,j) { return (j * 20) + 40; })
//the 3rd argum. -------^ ^--- using the 3rd argument
In D3 v3, the third argument is the index of the parent group. However, in v4, the third argument is the current group. The changelog is clear:
The arguments passed to callback functions has changed slightly in 4.0 to be more consistent. The standard arguments are the element’s datum (d), the element’s index (i), and the element’s group (nodes), with this as the element.
But there is a way to achieve what you want in v4! The same changelog says:
The slight exception to this convention is selection.data, which is evaluated for each group rather than each element; it is passed the group’s parent datum (d), the group index (i), and the selection’s parents (parents), with this as the group’s parent. (emphasis mine)
Thus, we can use the data()
method to get the group's index.
Here, I'm using a local variable...
var local = d3.local();
... to get the index inside data()
:
.data( function(d,i) {
local.set(this, i);
return d;
})
Then, using it to set the y
position:
.attr("y", function(d) {
return (local.get(this) * 20) + 40;
})
Here is your code with that change:
var dataset = [
[1, 3, 3, 5, 6, 7],
[3, 5, 8, 3, 2, 6],
[9, 0, 6, 3, 6, 3],
[3, 4, 4, 5, 6, 8],
[3, 4, 5, 2, 1, 8]
];
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500);
var local = d3.local();
svg.append("g")
.selectAll("g")
.data(dataset)
.enter()
.append("g")
.selectAll("text")
.data(function(d, i) {
local.set(this, i)
return d;
})
.enter()
.append("text")
.text(function(d, i, j) {
return d;
})
.attr("x", function(d, i, j) {
return (i * 20) + 40;
})
.attr("y", function(d) {
return (local.get(this) * 20) + 40;
})
.attr("font-family", "sans-serif")
.attr("font-size", "20px")
<script src="https://d3js.org/d3.v4.min.js"></script>
Source: stackoverflow.com
Related Query
- Multidimensional array for D3
- Using an associative array as data for D3
- D3: Using node attribute for links instead of index in array
- Binning an array in javascript for a histogram
- How to load data from an internal JSON array rather than from an external resource / file for a collapsible tree in d3.js?
- Displaying Data from Multidimensional Array in D3.js
- D3.js v5 Domain() not taking variable for array
- Javascript manipulate data into array of object for d3 stacked chart
- How to save d3 selections in an array for later use D3.js?
- JavaScript - Manipulate nested multidimensional array of objects
- Filter D3 multidimensional array by another array
- D3 and updating elements of a multidimensional array
- Associative arrays and using parent d as a source array for selection.data()
- How to plot multiple lines one for each element of an array contains y values in vega spec data?
- d3.nest() sum for object array data
- How to format array of values to form a distribution for google-charts histogram?
- Merge array of objects based on id for D3 bezier links
- d3.js: Is there a way to get a linear color-output for an array of elements?
- Object.getOwnPropertyNames returns an empty array for an nonempty object
- is D3 looping through the whole array for each callback we set?
- Converting data structure of a JSON array for stacked bar chart
- d3js get data from multidimensional array
- Javascript Map Won't Return Array Value, for D3.js Chart
- How do I change from JS Array to JS Object for D3 Chart
- using a multi array for plotting data on a scatter with dc.js, d3 and crossfilter
- Removing duplicate edges from an array for a d3 force directed graph
- How does d3 select array for iteration?
- Group a HTML tabulation from multidimensional array with data driven documents
- built-in for generating array of plots?
- How do I structure the Data array for the following d3 chart, in order to populate with real data
More Query from same tag
- How do I make sure the zoom doesn't go below zero and avoid the zoomed points touching the y and z axis? d3.zoom v4
- How to add non linear curve between any two points of area chart in d3.js
- Creating nested Json structure with multiple key values in Python from Json
- D3 draw multiple files in one chart each file represent different line/bar
- Returning array from d3.json()
- Custom mouse interaction for SVG layer in Google Maps
- D3.js linegraph: How can I apply the interpolation also to line marker positions?
- d3 - labelling the calendar example
- d3 chart resize doesn't work as expected
- Dragging nodes with labels in d3 v4 force layout glitches
- How to change the height of d3 observable notebook embed
- How to play a sound from audio tag in D3js selection?
- Bar graph colors based on value in c3.js
- Adding arrows and text to nodes in d3js Force Layout
- draw circle in the end of SVG path in realtime line chart D3.js
- D3 - Make children fill parent group
- How to setup D3.js axis labels to show rounded numbers with the $ sign?
- Transition circle radius in d3 to cancel scaling transition--works but timing is off
- How to build data set for D3 In JavaScript?
- addEventListener doesn't work for element added by append method from d3js
- d3.js - Allow brushing and zooming on same chart
- how to use Promise.all instead of queue in d3
- d3 timeline make axis fragmented (color-code) based on time offset
- d3 realtime graph appears only after a delay
- D3 How to change dataset based on drop down box selection
- Update one Wicket Panel from clicking an item in another Wicket Panel
- Using setInterval with d3js to update values
- d3 function(d,i) - the meaning of i changed as data changed
- Null/Empty vs Zero/0 in the defined line
- How to append text to normalized stacked chart in d3js v4