控制 billboard.js 中 x 轴刻度的多行扩展

Question

按照one example我们可以格式化刻度文本。我看到这设置为 multiline: true 默认情况下，这很好，但我也希望能够控制换行发生的位置。有办法吗？

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js"></script>
  <title>JS Bin</title>
</head>

<body>
  <div id="tick"></div>
  <script>
    var chart = bb.generate({
      data: {
        x: "x",
        columns: [
          ["x", "2010-01-01", "2011-01-01", "2012-01-01", "2013-01-01", "2014-01-01", "2015-01-01"],
          ["sample", 30, 200, 100, 400, 150, 250]
        ]
      },
      size: {
        width: 500,
        height: 250
      },
      legend: {
        show: false
      },
      axis: {
        x: {
          height: 100,
          type: "timeseries",
          tick: {
           rotate: -75,
            format: function (x) {
              return x.getFullYear() + ' control this line breaking ';
            }
          }
        }
      },
      bindto: "#tick",
    });
  </script>
</body>

</html>

Answer 1

svg 文本节点没有 <br>。换行需要为每行文本添加一个<tspan>节点。

此时，您可以使用 axis.x.tick.width 选项处理换行。

axis: {
    x: {
        tick: {
            width: 80
        }
    }
},

Answer 2

更新 - billboard.js 现在 supports multiline

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js"></script>
  <title>JS Bin</title>
</head>

<body>
  <div id="tick"></div>
  <script>
    var chart = bb.generate({
      data: {
        x: "x",
        columns: [
          ["x", "2010-01-01", "2011-01-01", "2012-01-01", "2013-01-01", "2014-01-01", "2015-01-01"],
          ["sample", 30, 200, 100, 400, 150, 250]
        ]
      },
      size: {
        width: 500,
        height: 250
      },
      legend: {
        show: false
      },
      axis: {
        x: {
          height: 100,
          type: "timeseries",
          tick: {
           //rotate: -20,
            format: function (x) {
              return x.getFullYear() + ' \ncontrol \nthis \nline \nbreaking ';
            }
          }
        }
      },
      bindto: "#tick",
    });
  </script>
</body>

</html>

控制 billboard.js 中 x 轴刻度的多行扩展

Control multi line spreading of x-axis tick in billboard.js

javascript

d3.js

billboard.js