score:1

Accepted answer

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.


Related Query

More Query from same tag