Search code examples
d3.jsobservablehq

How to wrap long tick text in Observablehq using the Plot.plot function?

How to wrap long tick text in Observable using the Plot.plot function?

Here is an example with D3:

enter image description here

svg.select(".x_axis")
      .call(xAxis.tickFormat(d3.timeFormat("%d-%m-%Y %H:%M:%S")))
      .selectAll("text")
      .call(function (t) {
        t.each(function (d) {
          var self = d3.select(this);
          var s = self.text().split(' ');
          self.text(null);
          self.append("tspan")
            .attr("x", 0)
            .attr("dy", ".8em")
            .text(s[0]);
          self.append("tspan")
            .attr("x", 0)
            .attr("dy", "1.2em")
            .text(s[1]);
        })
      });

It's not clear to me how to integrate this into the plot function. Can I use tickFormat for this?

enter image description here

Solution

  • We have been discussing this at https://github.com/observablehq/plot/issues/460 but there is no official support yet. The idea would be to consider newlines in the tick format to, well, create a new line, as we do in Plot.text. Drafts are available at https://github.com/observablehq/plot/pull/609 and https://github.com/d3/d3-axis/pull/83