如何在 C3 中格式化 X 轴刻度值.js

为此，我们可以使用 d3 选择或其他库来强制换行，格式化第一行和后续行。

data.axis.x.tick.multiline = false强制原始 c3.generate（） 为单行，我们使用代码来解决此问题。

fixLabels()被多次调用以避免窗口大小调整问题。 我相信这可以改进。

请注意，我强制将标签检查为 YYYYMMDD 格式，以允许多个时区。 原始代码对我不起作用，因为我使用的是 BST。

var splitter = "~"; // choose a character unlikely to appear in your label
var chart = c3.generate({
    bindto: '#chart',
    data: {
      x: 'x',
        columns: [
        ["x", "2016-01-04", "2016-01-05", "2016-01-06", "2016-01-07", "2016-01-08", "2016-01-09", "2016-01-10", "2016-01-11", "2016-01-12", "2016-01-13", "2016-01-14", "2016-01-15", "2016-01-16", "2016-01-17", "2016-01-18", "2016-01-19", "2016-01-20", "2016-01-21", "2016-01-22", "2016-01-23", "2016-01-24", "2016-01-25", "2016-01-26", "2016-01-27", "2016-01-28", "2016-01-29", "2016-01-30", "2016-01-31", "2016-02-01", "2016-02-02", "2016-02-03"],
         ["Democrates", 49.85, 49.89, 49.82, 49.51, 49.42, 49.33, 49.24, 49.64, 49.57, 49.57, 49.01, 48.67, 48.7, 48.7, 48.7, 48.63, 48.63, 48.63, 48.63, 48.63, 48.61, 48.61, 48.68, 48.76, 48.84, 48.73, 48.76, 48.79, 48.81, 49.68, 49.63],
         ["Republicans", "50.15", "50.11", "50.18", "50.49", "50.58", "50.67", "50.76", "50.36", "50.43", "50.43", "50.99", "51.33", "51.30", "51.30", "51.30", "51.37", "51.37", "51.37", "51.37", "51.37", "51.39", "51.39", "51.32", "51.24", "51.16", "51.27", "51.24", "51.21", "51.19", "50.32", "50.37"]
        ],
         colors: {
            Democrates: '#4575b4',
            Republicans: '#d73027'
        },
    },
    axis: {
        x: {
            type: 'timeseries',
            max: '2016-12-08',
            tick: {
               values: ["2016-02-01", "2016-06-14", "2016-11-08", "2016-09-26", "2016-10-19", "2016-07-28" ],
                format: function (x) {
                  // calling this here may seem odd.  This forces 
                  // re-format of the labels even on window or container resize.
                  fixLabels();
                  var Ymdformat =  d3.time.format("%Y%m%d");
                  if (Ymdformat(x) == "20160201"){
                  return 'Feb 01' + splitter + 'Primaries and Caucuses'
                } else if (Ymdformat(x) == "20161108") {
                   return 'Nov 08' + splitter + 'Election Day'
                } else if (Ymdformat(x) == "20160926") {
                   return 'Sep 26' + splitter + 'Start of Presidential Debates'
                } else if (Ymdformat(x) == "20160728") {
                   return 'Jul 28' + splitter + 'Announcement of Nominees'
                } else {
                								var format = d3.time.format('%b %d');
                                var date = format(x)
                                return date
                }
                },
                fit: false,
                multiline: false
        }
        }
    },
    grid: {
     y: {
        lines: [
                {value: 50},
            ]
     },
     x: {
    lines: [
      {value: "2016-01-08", text: "Want to rorate this text in 180 degrees",
      class: "xLineLable", position: "end"}
    ]
  }
  }
});
function fixLabels() { 
    d3.selectAll("text[y='9'] tspan:not(.added)").each(function() {
    // Get the original label including splitter character(s)
    text_to_split = this.innerHTML;
    // Split into an array
    text_array = text_to_split.split(splitter);
    // Set first tspan to original label date
    this.innerHTML = text_array[0];
    // Set first tspan to bold text
    d3.select(this).style("font-weight",600);
    // Add additional tspans as necessary
    for ( i = 1; i < text_array.length; i++ ) {
      d3.select(d3.select(this).node().parentNode)
        .append("tspan")
        .attr('x',0)
        .attr('dy','1em')
        .attr('dx',0)
        .attr('class','added')
        .attr('font-style','italic')
        .text(text_array[i]);
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script>
<div id="chart"></div>

免责声明：这是一个不完整的答案，我从未使用过 c3.js（只有 d3.js），所以我不知道这是否会改变任何东西。

简短的回答是，不，据我所知，没有直接的方法可以做到这一点（特别是因为多行文本在 svg 中真的很痛苦）

但是，如果你想走很长的路，有一种方法：

• 像现在一样创建刻度，并在您想要换行符的地方添加一个特殊字符。（一个不可保密的空间就可以了）。

• 选择刻度元素：d3.selectAll(".x .tick text")

• 对于他们每个人：

  • 将文本提取到变量中，
  • 在开头插入"<tspan>"，在结尾插入"</tspan>"
  • 执行搜索和替换以通过"</tspan><tspan>"替换您的虚拟字符
  • 将新值作为 HTML 插入到刻度元素中。

这本身是不够的，因为 tspans 需要带有一个完整的坐标和对齐系统（我不太了解，无法给出答案），另外，如果你想要一些粗体文本，你需要应用文本样式......但总有一天它会让你到达那里......（祝你好运！