Skip to content

C
c3-closed
You need to sign in or sign up before continuing.
Commit 79c0cbd9 authored by Masayuki Tanaka's avatar Masayuki Tanaka
Browse files
Options

Fix centering arc - #130

parent 985975b9
Hide whitespace changes
Inline Side-by-side
Showing with 95 additions and 87 deletions
c3.js
View file @ 79c0cbd9
...@@ -319,9 +319,10 @@ ...@@ -319,9 +319,10 @@
/*-- Set Chart Params --*/ /*-- Set Chart Params --*/
var margin, margin2, margin3, width, width2, height, height2, currentWidth, currentHeight; var margin, margin2, margin3, width, width2, height, height2, currentWidth, currentHeight;
var radius, radiusExpanded, innerRadius, svgArc, svgArcExpanded, svgArcExpandedSub, pie; var radius, radiusExpanded, innerRadius, arcWidth, arcHeight, svgArc, svgArcExpanded, svgArcExpandedSub, pie;
var xMin, xMax, yMin, yMax, subXMin, subXMax, subYMin, subYMax; var xMin, xMax, yMin, yMax, subXMin, subXMax, subYMin, subYMax;
var x, y, y2, subX, subY, subY2, xAxis, yAxis, y2Axis, subXAxis; var x, y, y2, subX, subY, subY2, xAxis, yAxis, y2Axis, subXAxis;
var axes = {};
var xOrient = __axis_rotated ? "left" : "bottom", var xOrient = __axis_rotated ? "left" : "bottom",
yOrient = __axis_rotated ? (__axis_y_inner ? "top" : "bottom") : (__axis_y_inner ? "right" : "left"), yOrient = __axis_rotated ? (__axis_y_inner ? "top" : "bottom") : (__axis_y_inner ? "right" : "left"),
...@@ -336,7 +337,7 @@ ...@@ -336,7 +337,7 @@
y : function () { return "translate(0," + (__axis_rotated ? height : 0) + ")"; }, y : function () { return "translate(0," + (__axis_rotated ? height : 0) + ")"; },
y2 : function () { return "translate(" + (__axis_rotated ? 0 : width) + "," + (__axis_rotated ? 1 : 0) + ")"; }, y2 : function () { return "translate(" + (__axis_rotated ? 0 : width) + "," + (__axis_rotated ? 1 : 0) + ")"; },
subx : function () { return "translate(0," + (__axis_rotated ? 0 : height2) + ")"; }, subx : function () { return "translate(0," + (__axis_rotated ? 0 : height2) + ")"; },
arc: function () { return "translate(" + width / 2 + "," + height / 2 + ")"; } arc: function () { return "translate(" + (arcWidth / 2) + "," + (arcHeight / 2) + ")"; }
}; };
var isLegendRight = __legend_position === 'right'; var isLegendRight = __legend_position === 'right';
...@@ -407,8 +408,9 @@ ...@@ -407,8 +408,9 @@
function updateSizes() { function updateSizes() {
var legendHeight = getLegendHeight(), legendWidth = getLegendWidth(), var legendHeight = getLegendHeight(), legendWidth = getLegendWidth(),
legendHeightForBottom = isLegendRight ? 0 : legendHeight, legendHeightForBottom = isLegendRight ? 0 : legendHeight,
xAxisHeight = __axis_rotated ? 0 : getHorizontalAxisHeight('x'), hasArc = hasArcType(c3.data.targets),
subchartHeight = __subchart_show ? (__subchart_size_height + xAxisHeight) : 0; xAxisHeight = __axis_rotated || hasArc ? 0 : getHorizontalAxisHeight('x'),
subchartHeight = __subchart_show && !hasArc ? (__subchart_size_height + xAxisHeight) : 0;
currentWidth = getCurrentWidth(); currentWidth = getCurrentWidth();
currentHeight = getCurrentHeight(); currentHeight = getCurrentHeight();
...@@ -417,9 +419,9 @@ ...@@ -417,9 +419,9 @@
if (__axis_rotated) { if (__axis_rotated) {
margin = { margin = {
top: getHorizontalAxisHeight('y2') + __padding_top, top: getHorizontalAxisHeight('y2') + __padding_top,
right: getCurrentPaddingRight(), right: hasArc ? 0 : getCurrentPaddingRight(),
bottom: getHorizontalAxisHeight('y') + legendHeightForBottom + __padding_bottom, bottom: getHorizontalAxisHeight('y') + legendHeightForBottom + __padding_bottom,
left: subchartHeight + getCurrentPaddingLeft() left: subchartHeight + (hasArc ? 0 : getCurrentPaddingLeft())
}; };
margin2 = { margin2 = {
top: margin.top, top: margin.top,
...@@ -430,9 +432,9 @@ ...@@ -430,9 +432,9 @@
} else { } else {
margin = { margin = {
top: 4 + __padding_top, // for top tick text top: 4 + __padding_top, // for top tick text
right: getCurrentPaddingRight(), right: hasArc ? 0 : getCurrentPaddingRight(),
bottom: xAxisHeight + subchartHeight + legendHeightForBottom + __padding_bottom, bottom: xAxisHeight + subchartHeight + legendHeightForBottom + __padding_bottom,
left: getCurrentPaddingLeft() left: hasArc ? 0 : getCurrentPaddingLeft()
}; };
margin2 = { margin2 = {
top: currentHeight - subchartHeight - legendHeightForBottom, top: currentHeight - subchartHeight - legendHeightForBottom,
...@@ -460,10 +462,12 @@ ...@@ -460,10 +462,12 @@
if (height2 < 0) { height2 = 0; } if (height2 < 0) { height2 = 0; }
// for arc // for arc
arcWidth = width - (isLegendRight ? legendWidth + 10 : 0);
arcHeight = height - (isLegendRight ? 0 : 10);
updateRadius(); updateRadius();
if (isLegendRight && hasArcType(c3.data.targets)) { if (isLegendRight && hasArc) {
margin3.left = width / 2 + radiusExpanded * 1.1; margin3.left = arcWidth / 2 + radiusExpanded * 1.1;
} }
} }
function updateXgridFocus() { function updateXgridFocus() {
...@@ -474,7 +478,7 @@ ...@@ -474,7 +478,7 @@
.attr("y2", __axis_rotated ? -10 : height); .attr("y2", __axis_rotated ? -10 : height);
} }
function updateRadius() { function updateRadius() {
radiusExpanded = height / 2; radiusExpanded = Math.min(arcWidth, arcHeight) / 2;
radius = radiusExpanded * 0.95; radius = radiusExpanded * 0.95;
innerRadius = hasDonutType(c3.data.targets) ? radius * 0.6 : 0; innerRadius = hasDonutType(c3.data.targets) ? radius * 0.6 : 0;
} }
...@@ -483,7 +487,8 @@ ...@@ -483,7 +487,8 @@
leftAxis = main.select('.' + leftAxisClass).node(), leftAxis = main.select('.' + leftAxisClass).node(),
svgRect = leftAxis ? leftAxis.getBoundingClientRect() : {right: 0}, svgRect = leftAxis ? leftAxis.getBoundingClientRect() : {right: 0},
chartRect = d3.select(__bindto).node().getBoundingClientRect(), chartRect = d3.select(__bindto).node().getBoundingClientRect(),
svgLeft = svgRect.right - chartRect.left - getCurrentPaddingLeft(); hasArc = hasArcType(c3.data.targets),
svgLeft = svgRect.right - chartRect.left - (hasArc ? 0 : getCurrentPaddingLeft());
return svgLeft > 0 ? svgLeft : 0; return svgLeft > 0 ? svgLeft : 0;
} }
function getCurrentWidth() { function getCurrentWidth() {
...@@ -494,21 +499,18 @@ ...@@ -494,21 +499,18 @@
return h > 0 ? h : 320; return h > 0 ? h : 320;
} }
function getCurrentPaddingLeft() { function getCurrentPaddingLeft() {
if (hasArcType(c3.data.targets)) { var defaultPadding = 1;
return 0; if (__padding_left) {
} else if (__padding_left) {
return __padding_left; return __padding_left;
} else if (__axis_rotated) { } else if (__axis_rotated) {
return !__axis_x_show ? 1 : getAxisWidthByAxisId('x'); return !__axis_x_show ? defaultPadding : getAxisWidthByAxisId('x');
} else { } else {
return !__axis_y_show || __axis_y_inner ? 1 : getAxisWidthByAxisId('y'); return !__axis_y_show || __axis_y_inner ? defaultPadding : getAxisWidthByAxisId('y');
} }
} }
function getCurrentPaddingRight() { function getCurrentPaddingRight() {
var defaultPadding = 1; var defaultPadding = 1;
if (hasArcType(c3.data.targets)) { if (__padding_right) {
return 0;
} else if (__padding_right) {
return __padding_right; return __padding_right;
} else if (isLegendRight) { } else if (isLegendRight) {
return getLegendWidth() + 20 + (__axis_y2_show && !__axis_rotated ? getAxisWidthByAxisId('y2') : defaultPadding); return getLegendWidth() + 20 + (__axis_y2_show && !__axis_rotated ? getAxisWidthByAxisId('y2') : defaultPadding);
...@@ -2590,38 +2592,35 @@ ...@@ -2590,38 +2592,35 @@
} }
// Add Axis // Add Axis
if (__axis_x_show) { axes.x = main.append("g")
main.append("g") .attr("class", CLASS.axisX)
.attr("class", CLASS.axisX) .attr("clip-path", clipPathForXAxis)
.attr("clip-path", clipPathForXAxis) .attr("transform", translate.x)
.attr("transform", translate.x) .style("visibility", __axis_x_show ? 'visible' : 'hidden');
.append("text") axes.x.append("text")
.attr("class", CLASS.axisXLabel) .attr("class", CLASS.axisXLabel)
.attr("transform", __axis_rotated ? "rotate(-90)" : "") .attr("transform", __axis_rotated ? "rotate(-90)" : "")
.style("text-anchor", textAnchorForXAxisLabel); .style("text-anchor", textAnchorForXAxisLabel);
}
axes.y = main.append("g")
if (__axis_y_show) { .attr("class", CLASS.axisY)
main.append("g") .attr("clip-path", clipPathForYAxis)
.attr("class", CLASS.axisY) .attr("transform", translate.y)
.attr("clip-path", clipPathForYAxis) .style("visibility", __axis_y_show ? 'visible' : 'hidden');
.attr("transform", translate.y) axes.y.append("text")
.append("text") .attr("class", CLASS.axisYLabel)
.attr("class", CLASS.axisYLabel) .attr("transform", __axis_rotated ? "" : "rotate(-90)")
.attr("transform", __axis_rotated ? "" : "rotate(-90)") .style("text-anchor", textAnchorForYAxisLabel);
.style("text-anchor", textAnchorForYAxisLabel);
} axes.y2 = main.append("g")
.attr("class", CLASS.axisY2)
if (__axis_y2_show) { // clip-path?
main.append("g") .attr("transform", translate.y2)
.attr("class", CLASS.axisY2) .style("visibility", __axis_y2_show ? 'visible' : 'hidden');
// clip-path? axes.y2.append("text")
.attr("transform", translate.y2) .attr("class", CLASS.axisY2Label)
.append("text") .attr("transform", __axis_rotated ? "" : "rotate(-90)")
.attr("class", CLASS.axisY2Label) .style("text-anchor", textAnchorForY2AxisLabel);
.attr("transform", __axis_rotated ? "" : "rotate(-90)")
.style("text-anchor", textAnchorForY2AxisLabel);
}
/*-- Context Region --*/ /*-- Context Region --*/
...@@ -2648,7 +2647,7 @@ ...@@ -2648,7 +2647,7 @@
// ATTENTION: This must be called AFTER chart added // ATTENTION: This must be called AFTER chart added
// Add Axis // Add Axis
context.append("g") axes.subx = context.append("g")
.attr("class", CLASS.axisX) .attr("class", CLASS.axisX)
.attr("transform", translate.subx) .attr("transform", translate.subx)
.attr("clip-path", __axis_rotated ? "" : clipPathForXAxis); .attr("clip-path", __axis_rotated ? "" : clipPathForXAxis);
...@@ -3021,18 +3020,18 @@ ...@@ -3021,18 +3020,18 @@
} }
} }
function redraw(options) { function redraw(options, transitions) {
var xaxis, subxaxis, yaxis, y2axis, xgrid, xgridAttr, xgridData, xgridLines, xgridLine, ygrid, ygridLines, ygridLine; var xgrid, xgridAttr, xgridData, xgridLines, xgridLine, ygrid, ygridLines, ygridLine;
var mainLine, mainArea, mainCircle, mainBar, mainArc, mainRegion, mainText, contextLine, contextBar, eventRect, eventRectUpdate; var mainLine, mainArea, mainCircle, mainBar, mainArc, mainRegion, mainText, contextLine, contextBar, eventRect, eventRectUpdate;
var barIndices = getBarIndices(), maxDataCountTarget, tickOffset; var barIndices = getBarIndices(), maxDataCountTarget, tickOffset;
var rectX, rectW; var rectX, rectW;
var withY, withSubchart, withTransition, withTransitionForExit, withTransitionForAxis, withTransform, withUpdateXDomain, withUpdateOrgXDomain, withLegend; var withY, withSubchart, withTransition, withTransitionForExit, withTransitionForAxis, withTransform, withUpdateXDomain, withUpdateOrgXDomain, withLegend;
var hideAxis = hasArcType(c3.data.targets); var hideAxis = hasArcType(c3.data.targets);
var drawBar, drawBarOnSub, xForText, yForText; var drawBar, drawBarOnSub, xForText, yForText;
var transitions, duration, durationForExit, durationForAxis; var duration, durationForExit, durationForAxis;
var targetsToShow = filterTargetsToShow(c3.data.targets), tickValues, i, intervalForCulling; var targetsToShow = filterTargetsToShow(c3.data.targets), tickValues, i, intervalForCulling;
options = isDefined(options) ? options : {}; options = options || {};
withY = isDefined(options.withY) ? options.withY : true; withY = isDefined(options.withY) ? options.withY : true;
withSubchart = isDefined(options.withSubchart) ? options.withSubchart : true; withSubchart = isDefined(options.withSubchart) ? options.withSubchart : true;
withTransition = isDefined(options.withTransition) ? options.withTransition : true; withTransition = isDefined(options.withTransition) ? options.withTransition : true;
...@@ -3048,17 +3047,7 @@ ...@@ -3048,17 +3047,7 @@
durationForExit = withTransitionForExit ? duration : 0; durationForExit = withTransitionForExit ? duration : 0;
durationForAxis = withTransitionForAxis ? duration : 0; durationForAxis = withTransitionForAxis ? duration : 0;
xaxis = main.select('.' + CLASS.axisX).style("opacity", hideAxis ? 0 : 1); transitions = transitions || generateAxisTransitions(durationForAxis);
yaxis = main.select('.' + CLASS.axisY).style("opacity", hideAxis ? 0 : 1);
y2axis = main.select('.' + CLASS.axisY2).style("opacity", hideAxis ? 0 : 1);
subxaxis = context.select('.' + CLASS.axisX).style("opacity", hideAxis ? 0 : 1);
transitions = {
axisX: xaxis.transition().duration(durationForAxis),
axisY: yaxis.transition().duration(durationForAxis),
axisY2: y2axis.transition().duration(durationForAxis),
axisSubX: subxaxis.transition().duration(durationForAxis),
};
// update legend and transform each g // update legend and transform each g
if (withLegend && __legend_show) { if (withLegend && __legend_show) {
...@@ -3067,7 +3056,7 @@ ...@@ -3067,7 +3056,7 @@
// MEMO: needed for grids calculation // MEMO: needed for grids calculation
if (isCategorized && targetsToShow.length === 0) { if (isCategorized && targetsToShow.length === 0) {
x.domain([0, xaxis.selectAll('.tick').size()]); x.domain([0, axes.x.selectAll('.tick').size()]);
} }
if (targetsToShow.length) { if (targetsToShow.length) {
...@@ -3095,6 +3084,10 @@ ...@@ -3095,6 +3084,10 @@
y2.domain(getYDomain(targetsToShow, 'y2')); y2.domain(getYDomain(targetsToShow, 'y2'));
// axes // axes
axes.x.style("opacity", hideAxis ? 0 : 1);
axes.y.style("opacity", hideAxis ? 0 : 1);
axes.y2.style("opacity", hideAxis ? 0 : 1);
axes.subx.style("opacity", hideAxis ? 0 : 1);
transitions.axisX.call(xAxis); transitions.axisX.call(xAxis);
transitions.axisY.call(yAxis); transitions.axisY.call(yAxis);
transitions.axisY2.call(y2Axis); transitions.axisY2.call(y2Axis);
...@@ -3125,7 +3118,7 @@ ...@@ -3125,7 +3118,7 @@
// rotate tick text if needed // rotate tick text if needed
if (!__axis_rotated && __axis_x_tick_rotate) { if (!__axis_rotated && __axis_x_tick_rotate) {
rotateTickText(xaxis, transitions.axisX, __axis_x_tick_rotate); rotateTickText(axes.x, transitions.axisX, __axis_x_tick_rotate);
} }
// setup drawer - MEMO: these must be called after axis updated // setup drawer - MEMO: these must be called after axis updated
...@@ -3445,7 +3438,7 @@ ...@@ -3445,7 +3438,7 @@
// rotate tick text if needed // rotate tick text if needed
if (!__axis_rotated && __axis_x_tick_rotate) { if (!__axis_rotated && __axis_x_tick_rotate) {
rotateTickText(subxaxis, transitions.axisSubX, __axis_x_tick_rotate); rotateTickText(axes.subx, transitions.axisSubX, __axis_x_tick_rotate);
} }
// extent rect // extent rect
...@@ -3628,7 +3621,17 @@ ...@@ -3628,7 +3621,17 @@
selectChart.style('max-height', currentHeight + "px"); selectChart.style('max-height', currentHeight + "px");
} }
function generateAxisTransitions(duration) {
return {
axisX: duration ? axes.x.transition().duration(duration) : axes.x,
axisY: duration ? axes.y.transition().duration(duration) : axes.y,
axisY2: duration ? axes.y2.transition().duration(duration) : axes.y2,
axisSubX: duration ? axes.subx.transition().duration(duration) : axes.subx,
};
}
function updateAndRedraw(options) { function updateAndRedraw(options) {
var transitions;
options = options || {}; options = options || {};
// same with redraw // same with redraw
options.withTransition = isDefined(options.withTransition) ? options.withTransition : true; options.withTransition = isDefined(options.withTransition) ? options.withTransition : true;
...@@ -3638,14 +3641,18 @@ ...@@ -3638,14 +3641,18 @@
options.withUpdateXDomain = true; options.withUpdateXDomain = true;
options.withUpdateOrgXDomain = true; options.withUpdateOrgXDomain = true;
options.withTransitionForExit = false; options.withTransitionForExit = false;
// Update sizes and scales // MEMO: called in updateLegend in redraw if withLegend
updateSizes(); if (!(options.withLegend && __legend_show)) {
updateScales(); transitions = generateAxisTransitions(options.withTransition ? __transition_duration : 0);
updateSvgSize(); // Update sizes and scales
// Update g positions updateSizes();
transformAll(options.withTransition); updateScales();
updateSvgSize();
// Update g positions
transformAll(options.withTransition, transitions);
}
// Draw with new sizes & scales // Draw with new sizes & scales
redraw(options); redraw(options, transitions);
} }
function updateTargets(targets) { function updateTargets(targets) {
...@@ -3888,6 +3895,7 @@ ...@@ -3888,6 +3895,7 @@
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();
var texts, rects, tiles;
options = options || {}; options = options || {};
withTransition = isDefined(options.withTransition) ? options.withTransition : true; withTransition = isDefined(options.withTransition) ? options.withTransition : true;
...@@ -4013,25 +4021,25 @@ ...@@ -4013,25 +4021,25 @@
.attr('width', 10) .attr('width', 10)
.attr('height', 10); .attr('height', 10);
legend.selectAll('text') texts = legend.selectAll('text')
.data(targetIds) .data(targetIds)
.text(function (id) { return isDefined(__data_names[id]) ? __data_names[id] : id; }) // MEMO: needed for update .text(function (id) { return isDefined(__data_names[id]) ? __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 === 0); });
.transition().duration(withTransition ? 250 : 0) (withTransition ? texts.transition() : texts)
.attr('x', xForLegendText) .attr('x', xForLegendText)
.attr('y', yForLegendText); .attr('y', yForLegendText);
legend.selectAll('rect.' + CLASS.legendItemEvent) rects = legend.selectAll('rect.' + CLASS.legendItemEvent)
.data(targetIds) .data(targetIds);
.transition().duration(withTransition ? 250 : 0) (withTransition ? rects.transition() : rects)
.attr('width', function (id) { return widths[id]; }) .attr('width', function (id) { return widths[id]; })
.attr('height', function (id) { return heights[id]; }) .attr('height', function (id) { return heights[id]; })
.attr('x', xForLegendRect) .attr('x', xForLegendRect)
.attr('y', yForLegendRect); .attr('y', yForLegendRect);
legend.selectAll('rect.' + CLASS.legendItemTile) tiles = legend.selectAll('rect.' + CLASS.legendItemTile)
.data(targetIds) .data(targetIds);
.transition().duration(withTransition ? 250 : 0) (withTransition ? tiles.transition() : tiles)
.style('fill', color) .style('fill', color)
.attr('x', xForLegend) .attr('x', xForLegend)
.attr('y', yForLegend); .attr('y', yForLegend);
......
c3.min.js
View file @ 79c0cbd9
This source diff could not be displayed because it is too large. You can view the blob instead.
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