CODEWITHSUNDEEP
javascriptjqueryd3.jssvgappend
Sandeep Patil
Sandeep Patil

Reputation: 21

How to append text to SVG

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.

Upvotes: 1

Views: 5752

Answers (2)

Gilsha
Gilsha

Reputation: 14591

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.

Upvotes: 2

user4408375
user4408375

Reputation:

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;})

Upvotes: 5

Related Questions