d3.js 如何使用Plot.plot函数在Observablehq中换行长刻度文本?

vxbzzdmp  于 2022-11-12  发布在  其他
关注(0)|答案(2)|浏览(229)

如何使用Plot.plot函数在Observable中换行长刻度文本?
以下是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]);
        })
      });

我不清楚如何将其集成到绘图函数中。我可以使用tickFormat吗?

lhcgjxsq

lhcgjxsq1#

我们已经在https://github.com/observablehq/plot/issues/460上讨论过这个问题,但是目前还没有官方的支持。我们的想法是在tick格式中考虑换行,好吧,创建一个新行,就像我们在Plot.text中做的那样。草稿可以在https://github.com/observablehq/plot/pull/609https://github.com/d3/d3-axis/pull/83上找到

1rhkuytd

1rhkuytd2#

通过@Fil的提示“**......对Plot......**返回的svg进行一些后处理”和一些D3代码,我现在能够用两行标记x轴标记。请查看Observable的笔记本data_plot

相关问题