d3.js: Dual lines of text for each tick on an axis?

Question

I have a chart with dates on the x-axis. Now I would like to add the time aswell and place it on the row below the date for each tick because the text get rather wide for each tick with both date and time.

By looking to the question suggestion below I tried this instead:

var xMainScale = d3.scale.linear()
   .domain([0,100])
   .range([20, 600]);

//--- date format
var formatAsDate = function(d) {var md = new Date(d*1000);
   md_utc=new Date(md.getUTCFullYear(), md.getUTCMonth(),
   md.g etUTCDate(),  md.getUTCHours(), md.getUTCMinutes(), md.getUTCSeconds());
   return md_utc.format("Y-m-d H:i:s");};

//--- label on several rows
var insertLinebreaks = function (d) {
var el = d3.select(this);
var words = d.split(' ');
el.text('');

for (var i = 0; i < words.length; i++) {
  var tspan = el.append('tspan').text(words[i]);
  if (i > 0)
    tspan.attr('x', 0).attr('dy', '15');
 }
};

//===== axis
var xMainAxis = d3.svg.axis()
  .scale(xMainScale)
  .orient("bottom")
  .ticks(5)
  .tickFormat(formatAsDate);

//====== create SVG element
var chart = d3.select("body")
  .append("svg:svg")
  .attr("width", w)
  .attr("height", h)
  .attr("id","chart")
  .attr("class","chart");

//==== main chart (there are more but I left them out here)
var main = chart.append('g')
  .attr('transform', 'translate(' + 25 + ',' + 25 + ')')
  .attr('width', w)
  .attr('height', main_h)
  .attr('class', 'main')
  .attr('id', 'mainchart');

//===== create x axis
main.append("g")
  .attr("id","main_x")
  .attr("class", "x_axis")
  .attr("transform", "translate("+0+"," + (700 - 25)  + ")")
  .call(xMainAxis);

In a function a bit down:

//----- update the axis
main.select('#main_x').call(xMainAxis);
main.selectAll('#main_x g text').each(insertLinebreaks);

I have cut and past what I think is the important parts as my code is rather large. I think I'm passing the wrong objects to the insertLinebreaks function, but what should I pass instead?

/Lars

Have you seen [this question](http://stackoverflow.com/questions/13241475/how-do-i-include-newlines-in-labels-in-d3-charts)? — Lars Kotthoff, Oct 17 '13 at 14:27
Added more code, hopefully enought. As the complete code as is rather large it doesn't suit for posting it all. — Lars Ljungberg, Oct 18 '13 at 12:50
Could you elaborate on how your current solution isn't working? Note that you'll also have to set the `.text()` content of your elements to "" when inserting `tspan`s. — Lars Kotthoff, Oct 18 '13 at 13:11
When I run then code, the date and time remains side by side. Doesn't the el.text('') take care of empty the text element? — Lars Ljungberg, Oct 18 '13 at 13:17
Ah yes, so it does. Did you verify that your string is split correctly? — Lars Kotthoff, Oct 18 '13 at 13:21
It seem that here I got one problem: got the error "the object don't has method split". — Lars Ljungberg, Oct 18 '13 at 13:29
Oh right, you don't actually have `d` in this case. Try `d3.select(this).text().split(' ')`. — Lars Kotthoff, Oct 18 '13 at 13:31

score 4 · Accepted Answer · answered Oct 18 '13 at 13:40

4

Thanks to @Lars Kotthoff who helped me to find the solution.

By changing the function insertLinebreakes to:

var insertLinebreaks = function (d) {
  var el = d3.select(this);
  var words=d3.select(this).text().split(' ');

  el.text('');

  for (var i = 0; i < words.length; i++) {
var tspan = el.append('tspan').text(words[i]);
if (i > 0)
      tspan.attr('x', 0).attr('dy', '15');
  }
 };

It works.

answered Oct 18 '13 at 13:40

Lars Ljungberg

313
1
6
19

for some reason for me when i append text back to the element it append the same text back so none of the tspans get appended just one text element with the old date not three separate data plus `el.text('')` does nothing. – Box and Cox May 06 '19 at 23:24

d3.js: Dual lines of text for each tick on an axis?

1 Answers1