xCharts のxaxisに改行を追加したい。改行を追加しようとして<tspan>
失敗しました。
以下は私がこれまで持っているコードです:
// Set initial data
var data = {
"xScale": "time",
"yScale": "linear",
"type": "line",
"main": [
{
"className": ".foo",
"data": [
{
"x":"2013-08-06 14:30:00",
"y":12
},
{
"x":"2013-08-06 14:30:01",
"y":8
}
]
}
]
}
// Set options
var opts = {
"dataFormatX": function(x) {
return d3.time.format('%Y-%m-%d %H:%M:%S').parse(x);
},
"tickFormatX": function(x) {
/** This is where I'm adding the <tspan> **/
return '<tspan>' + d3.time.format('%Y-%m-%d')(x) + '</tspan>'
+ '<tspan x="0" dy="1em">' + d3.time.format('%H:%M:%S')(x) + '</tspan>';
}
}
// Plot the graph
var recentChart = new xChart('line', data, '#recent-Chart', opts);
下の行に YYYY-MM-DD と HH:MM:SS をプロットする必要があります。ただし、生成された出力は次のとおりです。
<text y="3" x="0" dy=".71em" text-anchor="middle"><tspan>2013-08-06</tspan><tspan x="0" dy="1em">14:30:00</tspan></text>
でエスケープし"\<tspan\>"
ても同じ結果になります。
改行を挿入するにはどうすればよいですか?