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

Here is an example with D3:

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?

CodePudding user response：

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