playground
/
c3
mirror of https://github.com/masayuki0812/c3.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Fix legend position to be centered - #515

pull/555/head
Masayuki Tanaka 10 years ago
parent
d9c280a587
commit
2cb20df9ea
4 changed files with 26 additions and 22 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 22
      c3.js
  2. 4
      c3.min.js
  3. 20
      src/legend.js
  4. 2
      src/text.js

22
c3.js
Unescape View File

@ -3000,7 +3000,7 @@
}; };
c3_chart_internal_fn.getTextRect = function (text, cls) { c3_chart_internal_fn.getTextRect = function (text, cls) {
var rect; var rect;
this.d3.select('body').selectAll('.dummy') this.svg.selectAll('.dummy')
.data([text]) .data([text])
.enter().append('text') .enter().append('text')
.classed(cls ? cls : "", true) .classed(cls ? cls : "", true)
@ -3462,6 +3462,7 @@
top: $$.isLegendTop ? $$.getCurrentPaddingTop() + config.legend_inset_y + 5.5 : $$.currentHeight - legendHeight - $$.getCurrentPaddingBottom() - config.legend_inset_y, top: $$.isLegendTop ? $$.getCurrentPaddingTop() + config.legend_inset_y + 5.5 : $$.currentHeight - legendHeight - $$.getCurrentPaddingBottom() - config.legend_inset_y,
left: $$.isLegendLeft ? $$.getCurrentPaddingLeft() + config.legend_inset_x + 0.5 : $$.currentWidth - legendWidth - $$.getCurrentPaddingRight() - config.legend_inset_x + 0.5 left: $$.isLegendLeft ? $$.getCurrentPaddingLeft() + config.legend_inset_x + 0.5 : $$.currentWidth - legendWidth - $$.getCurrentPaddingRight() - config.legend_inset_x + 0.5
}; };
$$.margin3 = { $$.margin3 = {
top: $$.isLegendRight ? 0 : $$.isLegendInset ? insetLegendPosition.top : $$.currentHeight - legendHeight, top: $$.isLegendRight ? 0 : $$.isLegendInset ? insetLegendPosition.top : $$.currentHeight - legendHeight,
right: NaN, right: NaN,
@ -3552,7 +3553,7 @@
c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) { c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
var $$ = this, config = $$.config; var $$ = this, config = $$.config;
var xForLegend, xForLegendText, xForLegendRect, yForLegend, yForLegendText, yForLegendRect; var xForLegend, xForLegendText, xForLegendRect, yForLegend, yForLegendText, yForLegendRect;
var paddingTop = 4, paddingRight = 36, maxWidth = 0, maxHeight = 0, posMin = 10; var paddingTop = 4, paddingRight = 10, maxWidth = 0, maxHeight = 0, posMin = 10, tileWidth = 15;
var l, totalLength = 0, offsets = {}, widths = {}, heights = {}, margins = [0], steps = {}, step = 0; var l, totalLength = 0, offsets = {}, widths = {}, heights = {}, margins = [0], steps = {}, step = 0;
var withTransition, withTransitionForTransform; var withTransition, withTransitionForTransform;
var hasFocused = $$.legend.selectAll('.' + CLASS.legendItemFocused).size(); var hasFocused = $$.legend.selectAll('.' + CLASS.legendItemFocused).size();
@ -3562,10 +3563,11 @@
withTransition = getOption(options, "withTransition", true); withTransition = getOption(options, "withTransition", true);
withTransitionForTransform = getOption(options, "withTransitionForTransform", true); withTransitionForTransform = getOption(options, "withTransitionForTransform", true);
function updatePositions(textElement, id, reset) { function updatePositions(textElement, id, index) {
var box = $$.getTextRect(textElement.textContent, CLASS.legendItem), var reset = index === 0, isLast = index === targetIds.length - 1,
itemWidth = Math.ceil((box.width + paddingRight) / 10) * 10, box = $$.getTextRect(textElement.textContent, CLASS.legendItem),
itemHeight = Math.ceil((box.height + paddingTop) / 10) * 10, itemWidth = box.width + tileWidth + (isLast && !$$.isLegendRight ? 0 : paddingRight),
itemHeight = box.height + paddingTop,
itemLength = $$.isLegendRight || $$.isLegendInset ? itemHeight : itemWidth, itemLength = $$.isLegendRight || $$.isLegendInset ? itemHeight : itemWidth,
areaLength = $$.isLegendRight || $$.isLegendInset ? $$.getLegendHeight() : $$.getLegendWidth(), areaLength = $$.isLegendRight || $$.isLegendInset ? $$.getLegendHeight() : $$.getLegendWidth(),
margin, maxLength; margin, maxLength;
@ -3634,8 +3636,8 @@
} }
xForLegendText = function (id, i) { return xForLegend(id, i) + 14; }; xForLegendText = function (id, i) { return xForLegend(id, i) + 14; };
yForLegendText = function (id, i) { return yForLegend(id, i) + 9; }; yForLegendText = function (id, i) { return yForLegend(id, i) + 9; };
xForLegendRect = function (id, i) { return xForLegend(id, i) - 4; }; xForLegendRect = function (id, i) { return xForLegend(id, i); };
yForLegendRect = function (id, i) { return yForLegend(id, i) - 7; }; yForLegendRect = function (id, i) { return yForLegend(id, i) - 5; };
// Define g for legend area // Define g for legend area
l = $$.legend.selectAll('.' + CLASS.legendItem) l = $$.legend.selectAll('.' + CLASS.legendItem)
@ -3667,7 +3669,7 @@
}); });
l.append('text') l.append('text')
.text(function (id) { return isDefined(config.data_names[id]) ? config.data_names[id] : id; }) .text(function (id) { return isDefined(config.data_names[id]) ? config.data_names[id] : id; })
.each(function (id, i) { updatePositions(this, id, i === 0); }) .each(function (id, i) { updatePositions(this, id, i); })
.style("pointer-events", "none") .style("pointer-events", "none")
.attr('x', $$.isLegendRight || $$.isLegendInset ? xForLegendText : -200) .attr('x', $$.isLegendRight || $$.isLegendInset ? xForLegendText : -200)
.attr('y', $$.isLegendRight || $$.isLegendInset ? -200 : yForLegendText); .attr('y', $$.isLegendRight || $$.isLegendInset ? -200 : yForLegendText);
@ -3696,7 +3698,7 @@
texts = $$.legend.selectAll('text') texts = $$.legend.selectAll('text')
.data(targetIds) .data(targetIds)
.text(function (id) { return isDefined(config.data_names[id]) ? config.data_names[id] : id; }) // MEMO: needed for update .text(function (id) { return isDefined(config.data_names[id]) ? config.data_names[id] : id; }) // MEMO: needed for update
.each(function (id, i) { updatePositions(this, id, i === 0); }); .each(function (id, i) { updatePositions(this, id, i); });
(withTransition ? texts.transition() : texts) (withTransition ? texts.transition() : texts)
.attr('x', xForLegendText) .attr('x', xForLegendText)
.attr('y', yForLegendText); .attr('y', yForLegendText);

4
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

20
src/legend.js
Unescape View File

@ -14,6 +14,7 @@ c3_chart_internal_fn.updateSizeForLegend = function (legendHeight, legendWidth)
top: $$.isLegendTop ? $$.getCurrentPaddingTop() + config.legend_inset_y + 5.5 : $$.currentHeight - legendHeight - $$.getCurrentPaddingBottom() - config.legend_inset_y, top: $$.isLegendTop ? $$.getCurrentPaddingTop() + config.legend_inset_y + 5.5 : $$.currentHeight - legendHeight - $$.getCurrentPaddingBottom() - config.legend_inset_y,
left: $$.isLegendLeft ? $$.getCurrentPaddingLeft() + config.legend_inset_x + 0.5 : $$.currentWidth - legendWidth - $$.getCurrentPaddingRight() - config.legend_inset_x + 0.5 left: $$.isLegendLeft ? $$.getCurrentPaddingLeft() + config.legend_inset_x + 0.5 : $$.currentWidth - legendWidth - $$.getCurrentPaddingRight() - config.legend_inset_x + 0.5
}; };
$$.margin3 = { $$.margin3 = {
top: $$.isLegendRight ? 0 : $$.isLegendInset ? insetLegendPosition.top : $$.currentHeight - legendHeight, top: $$.isLegendRight ? 0 : $$.isLegendInset ? insetLegendPosition.top : $$.currentHeight - legendHeight,
right: NaN, right: NaN,
@ -104,7 +105,7 @@ c3_chart_internal_fn.hideLegend = function (targetIds) {
c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) { c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
var $$ = this, config = $$.config; var $$ = this, config = $$.config;
var xForLegend, xForLegendText, xForLegendRect, yForLegend, yForLegendText, yForLegendRect; var xForLegend, xForLegendText, xForLegendRect, yForLegend, yForLegendText, yForLegendRect;
var paddingTop = 4, paddingRight = 36, maxWidth = 0, maxHeight = 0, posMin = 10; var paddingTop = 4, paddingRight = 10, maxWidth = 0, maxHeight = 0, posMin = 10, tileWidth = 15;
var l, totalLength = 0, offsets = {}, widths = {}, heights = {}, margins = [0], steps = {}, step = 0; var l, totalLength = 0, offsets = {}, widths = {}, heights = {}, margins = [0], steps = {}, step = 0;
var withTransition, withTransitionForTransform; var withTransition, withTransitionForTransform;
var hasFocused = $$.legend.selectAll('.' + CLASS.legendItemFocused).size(); var hasFocused = $$.legend.selectAll('.' + CLASS.legendItemFocused).size();
@ -114,10 +115,11 @@ c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
withTransition = getOption(options, "withTransition", true); withTransition = getOption(options, "withTransition", true);
withTransitionForTransform = getOption(options, "withTransitionForTransform", true); withTransitionForTransform = getOption(options, "withTransitionForTransform", true);
function updatePositions(textElement, id, reset) { function updatePositions(textElement, id, index) {
var box = $$.getTextRect(textElement.textContent, CLASS.legendItem), var reset = index === 0, isLast = index === targetIds.length - 1,
itemWidth = Math.ceil((box.width + paddingRight) / 10) * 10, box = $$.getTextRect(textElement.textContent, CLASS.legendItem),
itemHeight = Math.ceil((box.height + paddingTop) / 10) * 10, itemWidth = box.width + tileWidth + (isLast && !$$.isLegendRight ? 0 : paddingRight),
itemHeight = box.height + paddingTop,
itemLength = $$.isLegendRight || $$.isLegendInset ? itemHeight : itemWidth, itemLength = $$.isLegendRight || $$.isLegendInset ? itemHeight : itemWidth,
areaLength = $$.isLegendRight || $$.isLegendInset ? $$.getLegendHeight() : $$.getLegendWidth(), areaLength = $$.isLegendRight || $$.isLegendInset ? $$.getLegendHeight() : $$.getLegendWidth(),
margin, maxLength; margin, maxLength;
@ -186,8 +188,8 @@ c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
} }
xForLegendText = function (id, i) { return xForLegend(id, i) + 14; }; xForLegendText = function (id, i) { return xForLegend(id, i) + 14; };
yForLegendText = function (id, i) { return yForLegend(id, i) + 9; }; yForLegendText = function (id, i) { return yForLegend(id, i) + 9; };
xForLegendRect = function (id, i) { return xForLegend(id, i) - 4; }; xForLegendRect = function (id, i) { return xForLegend(id, i); };
yForLegendRect = function (id, i) { return yForLegend(id, i) - 7; }; yForLegendRect = function (id, i) { return yForLegend(id, i) - 5; };
// Define g for legend area // Define g for legend area
l = $$.legend.selectAll('.' + CLASS.legendItem) l = $$.legend.selectAll('.' + CLASS.legendItem)
@ -219,7 +221,7 @@ c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
}); });
l.append('text') l.append('text')
.text(function (id) { return isDefined(config.data_names[id]) ? config.data_names[id] : id; }) .text(function (id) { return isDefined(config.data_names[id]) ? config.data_names[id] : id; })
.each(function (id, i) { updatePositions(this, id, i === 0); }) .each(function (id, i) { updatePositions(this, id, i); })
.style("pointer-events", "none") .style("pointer-events", "none")
.attr('x', $$.isLegendRight || $$.isLegendInset ? xForLegendText : -200) .attr('x', $$.isLegendRight || $$.isLegendInset ? xForLegendText : -200)
.attr('y', $$.isLegendRight || $$.isLegendInset ? -200 : yForLegendText); .attr('y', $$.isLegendRight || $$.isLegendInset ? -200 : yForLegendText);
@ -248,7 +250,7 @@ c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
texts = $$.legend.selectAll('text') texts = $$.legend.selectAll('text')
.data(targetIds) .data(targetIds)
.text(function (id) { return isDefined(config.data_names[id]) ? config.data_names[id] : id; }) // MEMO: needed for update .text(function (id) { return isDefined(config.data_names[id]) ? config.data_names[id] : id; }) // MEMO: needed for update
.each(function (id, i) { updatePositions(this, id, i === 0); }); .each(function (id, i) { updatePositions(this, id, i); });
(withTransition ? texts.transition() : texts) (withTransition ? texts.transition() : texts)
.attr('x', xForLegendText) .attr('x', xForLegendText)
.attr('y', yForLegendText); .attr('y', yForLegendText);

2
src/text.js
Unescape View File

@ -48,7 +48,7 @@ c3_chart_internal_fn.addTransitionForText = function (transitions, xForText, yFo
}; };
c3_chart_internal_fn.getTextRect = function (text, cls) { c3_chart_internal_fn.getTextRect = function (text, cls) {
var rect; var rect;
this.d3.select('body').selectAll('.dummy') this.svg.selectAll('.dummy')
.data([text]) .data([text])
.enter().append('text') .enter().append('text')
.classed(cls ? cls : "", true) .classed(cls ? cls : "", true)

Write Preview
Loading…
Cancel
Save