score:1
Accepted answer
Have a look at your screenshot, the translate
attribute contains function u(n)....
. The variable y is a function not the value of the rect Y-coord. To get that you need d3.select(this).attr("y")
. But then the text is also not visible I used y(d.value)
but that is equivalent.
You have to add the texts just like the rects.
This you need to add to the d3v5 code I posted in https://stackoverflow.com/a/51573685/9938317
The text does not animate yet, use the same animation code as for the rect Y-coord. Or create the text at the end of the rect animation.
slice.selectAll("text")
.data(function(d) { return d.values; })
.enter().append("text")
.attr("class", 'bar-text')
.attr("fill", "#000")
.attr("text-anchor", "middle")
.text(function (d) { return d.value; })
.attr("x", function (d, i) { return x1.bandwidth() * (i+0.5); })
.attr("y", function (d, i) { return y(d.value) + 8; });
Source: stackoverflow.com
Related Query
- d3 bar label on grouped chart bar
- Label not center grouped bar chart lest than 5
- Adding label on a D3 bar chart
- d3 accessing nested data in grouped bar chart
- Adding Error Bars to Grouped Bar Chart with D3.js
- D3 brushing on grouped bar chart
- Making a grouped bar chart using d3.js
- Making a grouped bar chart when my groups are varied sizes?
- How to add space between bars in a grouped bar chart in a nvd3 grouped multibar chart?
- D3: Create a grouped bar chart from json objects
- Interactive sorting of grouped bar chart in D3js
- d3 nested grouped bar chart
- NVD3.js: Stacked and grouped bar chart with two y-axis
- x axis labels overlapping for grouped category bar chart in d3
- D3.js : How to read data from JSON in Grouped Bar Chart
- D3.js-how to clip area outside rectangle while zooming in a grouped bar chart
- d3 convert bar chart to grouped bar chart
- Grouped bar chart with zoom and updateable data error
- How to make grouped stacked bar chart in d3js?
- How to create vertically grouped bar chart in d3.js using json data?
- D3 Grouped Bar Chart with JSON nested data
- Add Zoom to a Grouped Bar Chart that uses a scaleBand
- Label placement in d3 radial bar chart
- D3 : How to add labels top of in each bar in grouped bar chart
- Create Grouped Stacked Bar Chart
- C3 bar chart - Custom X-axis label
- d3js grouped bar chart toggling legend
- Cannot properly draw a scatterplot over a grouped bar chart in D3
- D3 Grouped Bar Chart - Selecting entire group?
- Remove every other column label on a D3 bar chart
More Query from same tag
- d3 mercator, geo, and path methods
- D3 pie chart rendering in only one color
- AngularJS & D3 : Angular directive for D3 load multiple times
- All Brush No Zoom
- Implement discontinuous bar chart with D3.js
- d3 select anything with a specific class
- How can I set min/max of the x-axis in Rickshaw / D3?
- d3: duplicating paths with more dimensional array
- Is it possible to use the chrome engine in my windows app?
- d3.js text transition if string is too long
- D3js Export SVG to Image
- viewbox with pixel value to make d3 chart resposive is not working properly
- How to keep mouse over object when using drag and snap to with d3.js
- D3 V4 - Canvas Transitions: d3.timer duration
- D3 small circle located on edge of radius of larger circle
- d3js bar chart upside-down and sliding brushes
- Date axis labels with d3.js
- How to access a data element of a CSV file?
- How to get text() from checkbox if is checked?
- object HTMLImageElement cannot be "saved as" image in Internet Explorer
- Upgrading D3 Band Zoom from v3 to v4
- create drill down radar/spider chart with d3.js
- Changing "fill" style on axis tick labels not working (d3.js)
- Using SVG attributes in variables in d3
- d3.js issues. Appending div
- How to build a simple Donut Chart using D3js and Angular 7
- My d3 Scatter plot is not displaying anything at all
- How do I modify csv data after upload in vue?
- D3, is there any way to transition through an existing graph point by point?
- d3.js Shape scaling/google map controls and showing markers inside a shape area