I am trying to append text to the svg by below code for that I the following code but it's not working.

var svg = d3.select("#chart");

        xScale.domain(data.map(function(d){return d.key;}))
        yScale.domain([0,d3.max(data,function(d){return d.doc_count;})])

        svg.append("g")
            .attr("class","axis")
            .attr("transform","translate("+margin.left+","+height+")") 
            .call(xAxis);

        svg.append("g")
            .attr("class","axis")
            .attr("transform","translate("+margin.left+",0)")
            .call(yAxis);

        svg.attr("width",width + margin.left + margin.right)
            .attr("height",height + margin.top + margin.bottom)
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        svg.selectAll("rect")
            .data(data)
            .enter()
            .append("rect")
            .attr("x",function(d){return margin.left + xScale(d.key)})
            .attr("y",function(d){return yScale(d.doc_count)})
            .attr("width", xScale.rangeBand())
            .attr("height", function(d) { return height - yScale(d.doc_count); })
            .attr("fill","teal");

        svg.selectAll("text")
            .data(data)
            .enter()
            .append("text")
            .text(function(d){return d.doc_count;})

At the end when I see the dom there are no text element tags.

I am trying to append text to the svg by below code for that I the following code but it's not working.

var svg = d3.select("#chart");

        xScale.domain(data.map(function(d){return d.key;}))
        yScale.domain([0,d3.max(data,function(d){return d.doc_count;})])

        svg.append("g")
            .attr("class","axis")
            .attr("transform","translate("+margin.left+","+height+")") 
            .call(xAxis);

        svg.append("g")
            .attr("class","axis")
            .attr("transform","translate("+margin.left+",0)")
            .call(yAxis);

        svg.attr("width",width + margin.left + margin.right)
            .attr("height",height + margin.top + margin.bottom)
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        svg.selectAll("rect")
            .data(data)
            .enter()
            .append("rect")
            .attr("x",function(d){return margin.left + xScale(d.key)})
            .attr("y",function(d){return yScale(d.doc_count)})
            .attr("width", xScale.rangeBand())
            .attr("height", function(d) { return height - yScale(d.doc_count); })
            .attr("fill","teal");

        svg.selectAll("text")
            .data(data)
            .enter()
            .append("text")
            .text(function(d){return d.doc_count;})

At the end when I see the dom there are no text element tags.

• javascript
• jquery
• d3.js
• svg
• append

2 Answers 2

You are calling call(xAxis) and call(yAxis) which will create <text> elements so when you say d3.selectAll("text") it selects those elements created by call(xAxis) and call(yAxis).

so suppose your data count is 5 then it has already 5 <text> elements and it won't append a new one.

Update your code to

        svg.append("g")
            .attr("class","axis")
            .attr("transform","translate("+margin.left+","+height+")") 
            .call(xAxis);

        svg.append("g")
            .attr("class","axis")
            .attr("transform","translate("+margin.left+",0)")
            .call(yAxis);

after below code

svg.selectAll("text")
        .data(data)
        .enter()
        .append("text")
        .text(function(d){return d.doc_count;})

The issue in your code is the same as Soham mentioned in his answer. When you use text element selector, it will return all elements inside your SVG including the axis texts which got created automatically by d3 while creating axes.

So the best possible selection would be to use a different selector for the additional text labels.

svg.selectAll("text.label") //Or simply (".label")
    .data(data)
    .enter()
    .append("text")
    .attr("class","label")
    .text(function(d){return d.doc_count;})

You will also have to specify the text position attributes in this case.

If you would like to position text elements relative to the rect elements, you can create group elements for grouping rect and text elements and set the position attribute (transform) of group elements.