Browse Source

Fix x axis mutiline

pull/2246/head
Masayuki Tanaka 7 years ago
parent
commit
b1b21c01ff
  1. 4
      htdocs/samples/categorized.html
  2. 10
      src/axis.js

4
htdocs/samples/categorized.html

@ -6,7 +6,7 @@
<div id="chart1"></div> <div id="chart1"></div>
<div id="chart2"></div> <div id="chart2"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script> <script src="/js/c3.js"></script>
<script> <script>
@ -15,7 +15,7 @@
data: { data: {
x: 'x', x: 'x',
columns: [ columns: [
['x', '1e-3', '1e-2', '1'], ['x', '1e-3', '1e-2', '1', 'kjlsdjfl lksl lk jlsjflk lskj lskdfjlk lksdfjlskdj lks'],
['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250] ['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]
] ]
}, },

10
src/axis.js

@ -108,14 +108,14 @@ c3_axis_internal_fn.transitionise = function (selection) {
c3_axis_internal_fn.isVertical = function () { c3_axis_internal_fn.isVertical = function () {
return this.orient === 'left' || this.orient === 'right'; return this.orient === 'left' || this.orient === 'right';
}; };
c3_axis_internal_fn.tspanData = function (d, i, ticks, scale) { c3_axis_internal_fn.tspanData = function (d, i, scale) {
var internal = this; var internal = this;
var splitted = internal.params.tickMultiline ? internal.splitTickText(d, ticks, scale) : [].concat(internal.textFormatted(d)); var splitted = internal.params.tickMultiline ? internal.splitTickText(d, scale) : [].concat(internal.textFormatted(d));
return splitted.map(function (s) { return splitted.map(function (s) {
return { index: i, splitted: s, length: splitted.length }; return { index: i, splitted: s, length: splitted.length };
}); });
}; };
c3_axis_internal_fn.splitTickText = function (d, ticks, scale) { c3_axis_internal_fn.splitTickText = function (d, scale) {
var internal = this, var internal = this,
tickText = internal.textFormatted(d), tickText = internal.textFormatted(d),
maxWidth = internal.params.tickWidth, maxWidth = internal.params.tickWidth,
@ -126,7 +126,7 @@ c3_axis_internal_fn.splitTickText = function (d, ticks, scale) {
} }
if (!maxWidth || maxWidth <= 0) { if (!maxWidth || maxWidth <= 0) {
maxWidth = internal.isVertical() ? 95 : internal.params.isCategory ? (Math.ceil(scale(ticks[1]) - scale(ticks[0])) - 12) : 110; maxWidth = internal.isVertical() ? 95 : internal.params.isCategory ? (Math.ceil(scale(1) - scale(0)) - 12) : 110;
} }
function split(splitted, text) { function split(splitted, text) {
@ -223,7 +223,7 @@ c3_axis_internal_fn.generateAxis = function () {
textUpdate = tickUpdate.select("text").merge(tickEnter.append("text")); textUpdate = tickUpdate.select("text").merge(tickEnter.append("text"));
var tspans = tickUpdate.selectAll('text').selectAll('tspan').data(function (d, i) { var tspans = tickUpdate.selectAll('text').selectAll('tspan').data(function (d, i) {
return internal.tspanData(d, i, ticks, scale1); return internal.tspanData(d, i, scale1);
}), }),
tspanEnter = tspans.enter().append('tspan'), tspanEnter = tspans.enter().append('tspan'),
tspanExit = tspans.exit().remove(), tspanExit = tspans.exit().remove(),

Loading…
Cancel
Save