CODEWITHSUNDEEP
javascriptd3.jssvg
Thomas Linton
Thomas Linton

Reputation: 41

D3 Not Displaying SVG Text Element

This is probably a no-brainer, but I have exhausted my options here. Below is a link to the JSFiddle:

JSFiddle

svg.selectAll("text")
  .data(dataset)
  .enter()
  .append("text")
  .text(function(d) {
    return d.percentComplete;
  })
  .attr("x", function(d) {
    return xScale(new Date(d.startDate));
  })
  .attr("y", function(d) {
    return (yScale(d.taskName)) + ((h - margin.bottom) / taskCnt) / 2;
  })
  .attr("font-family", "sans-serif")
  .attr("font-size", "11px")
  .attr("fill", "white")
  .attr("text-anchor", "middle");

I can't get my labels to display on the bars to show the percentage complete. Not sure what I am doing wrong as this code works in another viz i made. BTW, i know my placement isn't right yet, I need to get the labels to display before i start putting the labels in the right place.

Thanks in advance!

Tom

Upvotes: 1

Views: 154

Answers (1)

Eric Guan
Eric Guan

Reputation: 15992

https://jsfiddle.net/guanzo/pje44ne7/2/

The axes that you created with D3 contain text elements, so that's interfering with your selectAll('text'). Just add a class specifying what kind of text you want to work with.

svg.selectAll("text.label")
    .data(dataset)
    .enter().append("text").attr('class','label')
    ...//rest of your code

Upvotes: 1

Related Questions