score:1
the problem is text is appending but after first one i.e., it is escaping revenue 12.and appending from second one "4.5"
this is because your current block that adds the text
elements has
var svgs = svg.selectall("g.container")
.data(localdatajson)
.enter()
...
which means that it searches for g.container
elements within svg and tries to link each one to corresponding localdatajson
elements (adding new ones for extra localdatajson
elements for which it can't find a corresoponding g.container
element).
since you have exactly one g.container
element, it will link the first element to that and then adds new text
elements for the remaining.
you want to be doing this
var svgs = svg.select("g.container").selectall("text.label")
.data(localdatajson)
.enter()
.append("text")
.classed("label", true)
...
instead i.e. match text elements in g.container
to the data array and add a new one for each extra one.
notice that we use .label
and added the class label
- this is because we want to match it to the text elements for the data labels (not say, the ones we add for the x axis labels)
while this solves the problem, you'll probably need a few more corrections in your x and y coordinates for the labels and you don't actually need to set a width for the labels
...
.attr("x", function (d, i) {
return convert.x(d.country) + (convert.x.rangeband(d) - 3) / 2;
})
.attr("y", function (d, i) {
return maxheight;
})
...
i set it to maxheight just to show it works - the bar height actually goes offchart because there's something wrong with your y scale.
Source: stackoverflow.com
Related Query
- How to add text legends in bars of a bar chart in D3?
- How to add space between bars in a grouped bar chart in a nvd3 grouped multibar chart?
- How to correctly centre text element on all bars of a nvd3 bar chart
- How to Add Multiline Text Tooltips in Bar Chart D3 JS
- How do i add a fixed text beside bar chart using D3
- How to add x axis text in Bar Chart column
- d3.js How to add lines to a bar chart
- d3.js bar chart sorting: can't figure out how to sort x-axis labels along with bars
- How to add a line on x-axis on a horizontal bar chart in d3
- D3 bar chart needs to add arrow and text in particular bar
- D3 : How to add labels top of in each bar in grouped bar chart
- d3.js bar chart - show/hide bars on legend click. how to filter correctly?
- How to add live data to stacked bar chart
- how to add tooltip bar chart d3.js
- How to draw multiple bars in a row in a bar chart with spaces in between with d3v5?
- Append text after bars on horizontal bar chart
- How to add a tooltip that shows a bar chart onto a d3.js map
- D3.js grouped bar chart text on bars
- d3.js - add text above bar chart not show
- How can i set the tick text of x-axis between bar in a bar chart in c3.js or d3.js?
- how to update text added in dimple.js stacked bar chart on data updation
- How to center align text labels on bar chart using d3js
- How to add multiple tool tips to a bar chart
- What am i doing wrong? Add text to bar chart with d3js
- d3.js how do I add text to Marimekko chart
- How to insert new data into a bar chart from input text field?
- D3 How to add rounded top border to a stacked bar chart
- How to reduce space b/w bars in group bar chart D3 v4
- How to update a bar chart with accompanying text in d3?
- How to add a line at top of stacked bar chart with d3.js?
More Query from same tag
- How to accurately zoom d3 maps which have already been translated
- Plotting points in D3.js
- load d3 with amd using dojo
- Trouble Shooting Cannot Read Property 'length' of Undefined
- How can you get a chart (Pie Chart) to Group on a .csv string field in dc.js, d3.js and crossfilter.js (Node)
- Increase margins for rotated axis labels with Crossfilter
- If statement for D3
- how to check whether you need to parse or not need to parse?
- Can't get alchemy.js graph visualisation to show panel, zoom or search
- Updating a stacked bar chart in d3.js (includes JSFiddle)
- Complex circle diagram
- d3 domain y not animating during legend toggles
- Centered labels in D3 tree
- D3 Spinning Globe: trouble incorporating zoom function
- dagreD3 - Are Renderer and DiGraph objects deprecated? How to do Transitions and Layouts?
- Convert geoJSON to SVG on device without using external service
- Drawing bezierCurve in d3.js
- Children with n>1 parents in d3.js tree layout
- Links not visible when loading json data dynamically into D3 Network Visualization
- dc.bar-chart margin and axis label size adjustment
- Single horizontal stacked bar
- D3.js clip paths cut off the edge of my graph
- Draw d3-axis in react-native
- Tooltip not working as expected
- Complex JSON to D3js stacked time series
- Appending nested svg elements with D3js data binding?
- D3JS remove classes similar to JQuery removeClass()?
- D3.js - Working with major and minor gridlines
- D3 v4 force directed graph with rectangles
- How to control d3.format with SI-prefix?