是否可以更改c3.js中刻度的格式。例如，我可以制作part of tick bold吗？我的图表在x轴上有日期和文字。我如何make dates bolder并更改刻度以便文本显示在日期下方？
更改
Feb 01 Primaries and Caucuses
到
Feb 01
Primaries and Caucuses
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-11-08',
tick: {
values: ["2016-02-01", "2016-06-14", "2016-11-08", "2016-09-26", "2016-10-19", "2016-07-18", "2016-07-28" ],
format: function (x) {
if (x == "Mon Feb 01 2016 00:00:00 GMT+0100 (CET)"){
return 'Feb 01' + 'Primaries and Caucuses '
} else if (x == "Tue Nov 08 2016 00:00:00 GMT+0100 (CET)") {
return 'Nov 08 Election Day'
} else if (x == "Mon Sep 26 2016 00:00:00 GMT+0200 (CEST)") {
return ' Sep 26 Start of Presidential Debates'
} else if (x == "Mon Jul 18 2016 00:00:00 GMT+0200 (CEST)") {
return 'Jul 25 Announcement of Nominees'
} else {
var format= d3.time.format("%b %d");
var date = format(x)
return date
}},
fit: 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"}
]
}
}
});
答案 0 :(得分：1)
免责声明：这是一个不完整的答案，我从未使用过c3.js（仅限d3.js），因此我不知道这是否会改变任何内容。 < / p>
简短的回答是，不，我知道没有直接的方法（特别是因为多行文字是svg的真正痛苦）
但，如果你想走很长的路，有办法：
像现在一样创建你的刻度，添加一个特殊字符，你想要一个换行符。 （不可分割的空间可以解决问题）。
选择刻度元素：d3.selectAll(".x .tick text")
每一个：
"<tspan>"，在最后插入"</tspan>" "</tspan><tspan>" 这本身是不够的，因为tspans需要有一个完整的坐标和对齐系统（我不能很好地理解它来回答），如果你想要一些粗体文字，你需要应用文字样式....但是有一天它会让你到那里......（祝你好运！）
答案 1 :(得分：0)
为了做到这一点，我们可以使用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>