Skip to content

C
c3-closed
Commit 2cb20df9 authored by Masayuki Tanaka's avatar Masayuki Tanaka
Browse files
Options

Fix legend position to be centered - #515

parent d9c280a5
Hide whitespace changes
Inline Side-by-side
Showing with 24 additions and 20 deletions
c3.js
View file @ 2cb20df9
...@@ -3000,7 +3000,7 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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);
......
c3.min.js
View file @ 2cb20df9
This source diff could not be displayed because it is too large. You can view the blob instead.
src/legend.js
View file @ 2cb20df9
...@@ -14,6 +14,7 @@ c3_chart_internal_fn.updateSizeForLegend = function (legendHeight, legendWidth) ...@@ -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) { ...@@ -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) { ...@@ -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) { ...@@ -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) { ...@@ -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) { ...@@ -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);
......
src/text.js
View file @ 2cb20df9
...@@ -48,7 +48,7 @@ c3_chart_internal_fn.addTransitionForText = function (transitions, xForText, yFo ...@@ -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)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment