CODEWITHSUNDEEP
javascriptd3.js
runtimeZero
runtimeZero

Reputation: 28076

Inserting a line break in text element in d3

Referring to this graph, I would like to insert a line break in the text value for each data-point

var labels = svg.selectAll('text')
  .data(monthlySales)
  .enter()
  .append('text')
  .text(function(d) {
    return d.stock + "\n " + d.count;
  }).

I currently have something like the above. It does not insert any line break just a space.

I have researched this and have seen some complex solutions. Is there a straightforward way to achieve this ?

Plnkr : http://plnkr.co/edit/B33mAZPMdTRTm6imHxYq?p=info

Upvotes: 1

Views: 4542

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

You can do it this way:

//lets create the label
    var labels = svg.selectAll('text')
      .data(monthlySales)
      .enter()
      .append('text')
      .append("tspan")
      .text(function(d) {
        return d.stock;
      }).attr({
      x: function(d, i) {
        var ordValue = ordinalValue(d.stock);
        return xScale(ordValue);
      },
      y: function(d, i) {
        return yScale(d.count);
      },
      "text-anchor": 'middle',
      "font-size": 10,
      "font-family": "sans-serif"
    });
    //lets create the count label
    svg.selectAll('text').append("tspan")
      .text(function(d) {
        return d.count;
      }).attr({
      x: function(d, i) {
        var ordValue = ordinalValue(d.stock);
        return xScale(ordValue);
      },
      y: function(d, i) {
        return yScale(d.count)+ 10;//to show it below the other label
      },
      "text-anchor": 'middle',
      "font-size": 10,
      "font-family": "sans-serif"
    });

Working code here(comments in code to help): http://plnkr.co/edit/xDthPgsMfoGTSouVIie8?p=preview

Upvotes: 1

Related Questions