Skip to content

C
c3-closed
Commit 0bbdad66 authored by Masayuki Tanaka's avatar Masayuki Tanaka
Browse files
Options

Modify structure of element and enable selection of pie - #158

parent 271ddb55
Hide whitespace changes
Inline Side-by-side
Showing with 147 additions and 109 deletions
c3.js
View file @ 0bbdad66
...@@ -33,12 +33,15 @@ ...@@ -33,12 +33,15 @@
shape: 'c3-shape', shape: 'c3-shape',
shapes: 'c3-shapes', shapes: 'c3-shapes',
line: 'c3-line', line: 'c3-line',
lines: 'c3-lines',
bar: 'c3-bar', bar: 'c3-bar',
bars: 'c3-bars', bars: 'c3-bars',
circle: 'c3-circle', circle: 'c3-circle',
circles: 'c3-circles', circles: 'c3-circles',
arc: 'c3-arc', arc: 'c3-arc',
arcs: 'c3-arcs',
area: 'c3-area', area: 'c3-area',
areas: 'c3-areas',
text: 'c3-text', text: 'c3-text',
texts: 'c3-texts', texts: 'c3-texts',
grid: 'c3-grid', grid: 'c3-grid',
...@@ -1738,13 +1741,16 @@ ...@@ -1738,13 +1741,16 @@
function classTexts(d) { return generateClass(CLASS.texts, d.id); } function classTexts(d) { return generateClass(CLASS.texts, d.id); }
function classShape(d, i) { return generateClass(CLASS.shape, i); } function classShape(d, i) { return generateClass(CLASS.shape, i); }
function classShapes(d) { return generateClass(CLASS.shapes, d.id); } function classShapes(d) { return generateClass(CLASS.shapes, d.id); }
function classLine(d) { return classShapes(d) + generateClass(CLASS.line, d.id); } function classLine(d) { return classShape(d) + generateClass(CLASS.line, d.id); }
function classLines(d) { return classShapes(d) + generateClass(CLASS.lines, d.id); }
function classCircle(d, i) { return classShape(d, i) + generateClass(CLASS.circle, i); } function classCircle(d, i) { return classShape(d, i) + generateClass(CLASS.circle, i); }
function classCircles(d) { return classShapes(d) + generateClass(CLASS.circles, d.id); } function classCircles(d) { return classShapes(d) + generateClass(CLASS.circles, d.id); }
function classBar(d, i) { return classShape(d, i) + generateClass(CLASS.bar, i); } function classBar(d, i) { return classShape(d, i) + generateClass(CLASS.bar, i); }
function classBars(d) { return classShapes(d) + generateClass(CLASS.bars, d.id); } function classBars(d) { return classShapes(d) + generateClass(CLASS.bars, d.id); }
function classArc(d) { return classShapes(d.data) + generateClass(CLASS.arc, d.data.id); } function classArc(d) { return classShape(d.data) + generateClass(CLASS.arc, d.data.id); }
function classArea(d) { return classShapes(d) + generateClass(CLASS.area, d.id); } function classArcs(d) { return classShapes(d.data) + generateClass(CLASS.arcs, d.data.id); }
function classArea(d) { return classShape(d) + generateClass(CLASS.area, d.id); }
function classAreas(d) { return classShapes(d) + generateClass(CLASS.areas, d.id); }
function classRegion(d, i) { return generateClass(CLASS.region, i) + ' ' + ('class' in d ? d.class : ''); } function classRegion(d, i) { return generateClass(CLASS.region, i) + ' ' + ('class' in d ? d.class : ''); }
function classEvent(d, i) { return generateClass(CLASS.eventRect, i); } function classEvent(d, i) { return generateClass(CLASS.eventRect, i); }
function classTarget(id) { function classTarget(id) {
...@@ -2130,10 +2136,13 @@ ...@@ -2130,10 +2136,13 @@
function isArcType(d) { function isArcType(d) {
return isPieType(d) || isDonutType(d); return isPieType(d) || isDonutType(d);
} }
/* not used
function lineData(d) { function lineData(d) {
return isLineType(d) ? d.values : []; return isLineType(d) ? [d] : [];
}
function arcData(d) {
return isArcType(d.data) ? [d] : [];
} }
/* not used
function scatterData(d) { function scatterData(d) {
return isScatterType(d) ? d.values : []; return isScatterType(d) ? d.values : [];
} }
...@@ -2270,7 +2279,7 @@ ...@@ -2270,7 +2279,7 @@
function selectBar(target, d) { function selectBar(target, d) {
__data_onselected(d, target.node()); __data_onselected(d, target.node());
target.transition().duration(100).style("fill", function () { return d3.rgb(color(d)).darker(1); }); target.transition().duration(100).style("fill", function () { return d3.rgb(color(d)).brighter(0.75); });
} }
function unselectBar(target, d) { function unselectBar(target, d) {
__data_onunselected(d, target.node()); __data_onunselected(d, target.node());
...@@ -2279,6 +2288,9 @@ ...@@ -2279,6 +2288,9 @@
function toggleBar(selected, target, d, i) { function toggleBar(selected, target, d, i) {
selected ? selectBar(target, d, i) : unselectBar(target, d, i); selected ? selectBar(target, d, i) : unselectBar(target, d, i);
} }
function toggleArc(selected, target, d, i) {
toggleBar(selected, target, d.data, i);
}
function filterRemoveNull(data) { function filterRemoveNull(data) {
return data.filter(function (d) { return isValue(d.value); }); return data.filter(function (d) { return isValue(d.value); });
...@@ -3026,17 +3038,20 @@ ...@@ -3026,17 +3038,20 @@
.call(zoom).on("dblclick.zoom", null); .call(zoom).on("dblclick.zoom", null);
} }
function toggleShape(target, d, i) { function toggleShape(that, d, i) {
var shape = d3.select(target), var shape = d3.select(that), isSelected = shape.classed(CLASS.SELECTED), isWithin, toggle;
isSelected = shape.classed(CLASS.SELECTED); if (that.nodeName === 'circle') {
var isWithin = false, toggle; isWithin = isWithinCircle(that, pointSelectR(d) * 1.5);
if (target.nodeName === 'circle') {
isWithin = isWithinCircle(target, pointSelectR(d) * 1.5);
toggle = togglePoint; toggle = togglePoint;
} }
else if (target.nodeName === 'path') { else if (that.nodeName === 'path') {
isWithin = isWithinBar(target); if (shape.classed(CLASS.bar)) {
toggle = toggleBar; isWithin = isWithinBar(that);
toggle = toggleBar;
} else { // would be arc
isWithin = true;
toggle = toggleArc;
}
} }
if (__data_selection_grouped || isWithin) { if (__data_selection_grouped || isWithin) {
if (__data_selection_enabled && __data_selection_isselectable(d)) { if (__data_selection_enabled && __data_selection_isselectable(d)) {
...@@ -3049,7 +3064,7 @@ ...@@ -3049,7 +3064,7 @@
shape.classed(CLASS.SELECTED, !isSelected); shape.classed(CLASS.SELECTED, !isSelected);
toggle(!isSelected, shape, d, i); toggle(!isSelected, shape, d, i);
} }
__data_onclick(d, target); __data_onclick(d, that);
} }
} }
...@@ -3133,7 +3148,7 @@ ...@@ -3133,7 +3148,7 @@
function redraw(options) { function redraw(options) {
var xaxis, subxaxis, yaxis, y2axis, xgrid, xgridData, xgridLines, xgridLine, ygrid, ygridLines, ygridLine; var xaxis, subxaxis, yaxis, y2axis, xgrid, xgridData, xgridLines, xgridLine, ygrid, ygridLines, ygridLine;
var mainCircle, mainBar, mainRegion, mainText, contextBar, eventRect, eventRectUpdate; var mainLine, mainArea, mainCircle, mainBar, mainArc, mainRegion, mainText, contextLine, contextBar, eventRect, eventRectUpdate;
var barIndices = getBarIndices(), maxDataCountTarget; var barIndices = getBarIndices(), maxDataCountTarget;
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;
...@@ -3380,11 +3395,9 @@ ...@@ -3380,11 +3395,9 @@
mainBar = main.selectAll('.' + CLASS.bars).selectAll('.' + CLASS.bar) mainBar = main.selectAll('.' + CLASS.bars).selectAll('.' + CLASS.bar)
.data(barData); .data(barData);
mainBar.enter().append('path') mainBar.enter().append('path')
.attr('d', drawBar) .attr("class", classBar)
.style("stroke", 'none') .style("stroke", 'none')
.style("opacity", 0) .style("fill", color);
.style("fill", function (d) { return color(d); })
.attr("class", classBar);
mainBar mainBar
.style("opacity", initialOpacity) .style("opacity", initialOpacity)
.transition().duration(duration) .transition().duration(duration)
...@@ -3394,41 +3407,40 @@ ...@@ -3394,41 +3407,40 @@
.style('opacity', 0) .style('opacity', 0)
.remove(); .remove();
mainText = main.selectAll('.' + CLASS.texts).selectAll('.' + CLASS.text)
.data(barOrLineData);
mainText.enter().append('text')
.attr("class", classText)
.attr('text-anchor', function (d) { return __axis_rotated ? (d.value < 0 ? 'end' : 'start') : 'middle'; })
.style("stroke", 'none')
.style("fill-opacity", 0);
mainText
.text(function (d) { return formatByAxisId(d.id)(d.value); })
.style("fill-opacity", initialOpacityForText)
.transition().duration(duration)
.attr('x', xForText)
.attr('y', yForText)
.style("fill-opacity", opacityForText);
mainText.exit()
.transition().duration(durationForExit)
.style('fill-opacity', 0)
.remove();
// lines and cricles // lines and cricles
main.selectAll('.' + CLASS.line) mainLine = main.selectAll('.' + CLASS.lines).selectAll('.' + CLASS.line)
.data(lineData);
mainLine.enter().append('path')
.attr('class', classLine)
.style("stroke", color);
mainLine
.style("opacity", initialOpacity) .style("opacity", initialOpacity)
.transition().duration(duration) .transition().duration(duration)
.attr("d", lineOnMain) .attr("d", lineOnMain)
.style("opacity", 1); .style("opacity", 1);
main.selectAll('.' + CLASS.area) mainLine.exit().transition().duration(durationForExit)
.style('opacity', 0)
.remove();
mainArea = main.selectAll('.' + CLASS.areas).selectAll('.' + CLASS.area)
.data(lineData);
mainArea.enter().append('path')
.attr("class", classArea)
.style("fill", color)
.style("opacity", function () { orgAreaOpacity = +d3.select(this).style('opacity'); return 0; });
mainArea
.style("opacity", 0) .style("opacity", 0)
.transition().duration(duration) .transition().duration(duration)
.attr("d", areaOnMain) .attr("d", areaOnMain)
.style("opacity", orgAreaOpacity); .style("opacity", orgAreaOpacity);
mainArea.exit().transition().duration(durationForExit)
.style('opacity', 0)
.remove();
mainCircle = main.selectAll('.' + CLASS.circles).selectAll('.' + CLASS.circle) mainCircle = main.selectAll('.' + CLASS.circles).selectAll('.' + CLASS.circle)
.data(lineOrScatterData); .data(lineOrScatterData);
mainCircle.enter().append("circle") mainCircle.enter().append("circle")
.attr("class", classCircle) .attr("class", classCircle)
.style('opacity', 0)
.attr("r", pointR); .attr("r", pointR);
mainCircle mainCircle
.style("opacity", initialOpacity) .style("opacity", initialOpacity)
...@@ -3438,10 +3450,74 @@ ...@@ -3438,10 +3450,74 @@
.attr("cy", __axis_rotated ? circleX : circleY); .attr("cy", __axis_rotated ? circleX : circleY);
mainCircle.exit().remove(); mainCircle.exit().remove();
mainText = main.selectAll('.' + CLASS.texts).selectAll('.' + CLASS.text)
.data(barOrLineData);
mainText.enter().append('text')
.attr("class", classText)
.attr('text-anchor', function (d) { return __axis_rotated ? (d.value < 0 ? 'end' : 'start') : 'middle'; })
.style("stroke", 'none')
.style("fill-opacity", 0);
mainText
.text(function (d) { return formatByAxisId(d.id)(d.value); })
.style("fill-opacity", initialOpacityForText)
.transition().duration(duration)
.attr('x', xForText)
.attr('y', yForText)
.style("fill-opacity", opacityForText);
mainText.exit()
.transition().duration(durationForExit)
.style('fill-opacity', 0)
.remove();
// arc // arc
main.each(function () { transiting = true; }).selectAll('.' + CLASS.chartArc).select('.' + CLASS.arc) mainArc = main.selectAll('.' + CLASS.arcs).selectAll('.' + CLASS.arc)
.data(arcData);
mainArc.enter().append('path')
.attr("class", classArc)
.style("fill", function (d) { return color(d.data); })
.style("cursor", function (d) { return __data_selection_isselectable(d) ? "pointer" : null; })
.style("opacity", 0)
.each(function (d) { this._current = d; })
.on('mouseover', function (d, i) {
var updated, arcData, callback;
if (transiting) { // skip while transiting
return;
}
updated = updateAngle(d);
arcData = convertToArcData(updated);
callback = getArcOnMouseOver();
// transitions
expandArc(updated.data.id);
toggleFocusLegend(updated.data.id, true);
callback(arcData, i);
})
.on('mousemove', function (d) {
var updated = updateAngle(d), arcData = convertToArcData(updated), selectedData = [arcData];
showTooltip(selectedData, d3.mouse(this));
})
.on('mouseout', function (d, i) {
var updated, arcData, callback;
if (transiting) { // skip while transiting
return;
}
updated = updateAngle(d);
arcData = convertToArcData(updated);
callback = getArcOnMouseOut();
// transitions
unexpandArc(updated.data.id);
revertLegend();
hideTooltip();
callback(arcData, i);
})
.on('click', function (d, i) {
var updated = updateAngle(d), arcData = convertToArcData(updated), callback = getArcOnClick();
toggleShape(this, d, i);
callback(arcData, i);
});
mainArc
.attr("transform", withTransform ? "scale(0)" : "") .attr("transform", withTransform ? "scale(0)" : "")
.style("opacity", function (d) { return d === this._current ? 0 : 1; }) .style("opacity", function (d) { return d === this._current ? 0 : 1; })
.each(function () { transiting = true; })
.transition().duration(duration) .transition().duration(duration)
.attrTween("d", function (d) { .attrTween("d", function (d) {
var updated = updateAngle(d), interpolate; var updated = updateAngle(d), interpolate;
...@@ -3465,6 +3541,9 @@ ...@@ -3465,6 +3541,9 @@
.call(endall, function () { .call(endall, function () {
transiting = false; transiting = false;
}); });
mainArc.exit().transition().duration(durationForExit)
.style('opacity', 0)
.remove();
main.selectAll('.' + CLASS.chartArc).select('text') main.selectAll('.' + CLASS.chartArc).select('text')
.attr("transform", transformForArcLabel) .attr("transform", transformForArcLabel)
.style("opacity", 0) .style("opacity", 0)
...@@ -3498,10 +3577,9 @@ ...@@ -3498,10 +3577,9 @@
contextBar = context.selectAll('.' + CLASS.bars).selectAll('.' + CLASS.bar) contextBar = context.selectAll('.' + CLASS.bars).selectAll('.' + CLASS.bar)
.data(barData); .data(barData);
contextBar.enter().append('path') contextBar.enter().append('path')
.attr('d', drawBarOnSub) .attr("class", classBar)
.style("stroke", 'none') .style("stroke", 'none')
.style("fill", function (d) { return color(d); }) .style("fill", color);
.attr("class", classBar);
contextBar contextBar
.style("opacity", initialOpacity) .style("opacity", initialOpacity)
.transition().duration(duration) .transition().duration(duration)
...@@ -3511,11 +3589,19 @@ ...@@ -3511,11 +3589,19 @@
.style('opacity', 0) .style('opacity', 0)
.remove(); .remove();
// lines // lines
context.selectAll('.' + CLASS.line) contextLine = context.selectAll('.' + CLASS.lines).selectAll('.' + CLASS.line)
.data(lineData);
contextLine.enter().append('path')
.attr('class', classLine)
.style('stroke', color);
contextLine
.style("opacity", initialOpacity) .style("opacity", initialOpacity)
.transition().duration(duration) .transition().duration(duration)
.attr("d", lineOnSub) .attr("d", lineOnSub)
.style('opacity', 1); .style('opacity', 1);
contextLine.exit().transition().duration(duration)
.style('opacity', 0)
.remove();
} }
} }
...@@ -3707,34 +3793,28 @@ ...@@ -3707,34 +3793,28 @@
// Bars for each data // Bars for each data
mainBarEnter.append('g') mainBarEnter.append('g')
.attr("class", classBars) .attr("class", classBars)
.style("stroke", "none")
.style("cursor", function (d) { return __data_selection_isselectable(d) ? "pointer" : null; }); .style("cursor", function (d) { return __data_selection_isselectable(d) ? "pointer" : null; });
//-- Line --// //-- Line --//
mainLineUpdate = main.select('.' + CLASS.chartLines) mainLineUpdate = main.select('.' + CLASS.chartLines).selectAll('.' + CLASS.chartLine)
.selectAll('.' + CLASS.chartLine)
.data(targets) .data(targets)
.attr('class', classChartLine); .attr('class', classChartLine);
mainLineEnter = mainLineUpdate.enter().append('g') mainLineEnter = mainLineUpdate.enter().append('g')
.attr('class', classChartLine) .attr('class', classChartLine)
.style('opacity', 0) .style('opacity', 0)
.style("pointer-events", "none"); .style("pointer-events", "none");
// Lines for each data // Lines for each data
mainLineEnter.append("path") mainLineEnter.append('g')
.attr("class", classLine) .attr("class", classLines);
.style("opacity", 0)
.style("stroke", function (d) { return color(d); });
// Areas // Areas
mainLineEnter.append("path") mainLineEnter.append('g')
.attr("class", classArea) .attr('class', classAreas);
.style("opacity", function () { orgAreaOpacity = +d3.select(this).style('opacity'); return 0; })
.style("fill", function (d) { return color(d); });
// Circles for each data point on lines // Circles for each data point on lines
mainLineEnter.append('g') mainLineEnter.append('g')
.attr("class", function (d) { return generateClass(CLASS.selectedCircles, d.id); }); .attr("class", function (d) { return generateClass(CLASS.selectedCircles, d.id); });
mainLineEnter.append('g') mainLineEnter.append('g')
.attr("class", classCircles) .attr("class", classCircles)
.style("fill", function (d) { return color(d); }) .style("fill", color)
.style("cursor", function (d) { return __data_selection_isselectable(d) ? "pointer" : null; }); .style("cursor", function (d) { return __data_selection_isselectable(d) ? "pointer" : null; });
// Update date for selected circles // Update date for selected circles
targets.forEach(function (t) { targets.forEach(function (t) {
...@@ -3751,47 +3831,8 @@ ...@@ -3751,47 +3831,8 @@
.attr("class", classChartArc); .attr("class", classChartArc);
mainPieEnter = mainPieUpdate.enter().append("g") mainPieEnter = mainPieUpdate.enter().append("g")
.attr("class", classChartArc); .attr("class", classChartArc);
mainPieEnter.append("path") mainPieEnter.append('g')
.attr("class", classArc) .attr('class', classArcs);
.style("opacity", 0)
.style("fill", function (d) { return color(d.data); })
.style("cursor", function (d) { return __data_selection_isselectable(d) ? "pointer" : null; })
.each(function (d) { this._current = d; })
.on('mouseover', function (d, i) {
var updated, arcData, callback;
if (transiting) { // skip while transiting
return;
}
updated = updateAngle(d);
arcData = convertToArcData(updated);
callback = getArcOnMouseOver();
// transitions
expandArc(updated.data.id);
toggleFocusLegend(updated.data.id, true);
callback(arcData, i);
})
.on('mousemove', function (d) {
var updated = updateAngle(d), arcData = convertToArcData(updated), selectedData = [arcData];
showTooltip(selectedData, d3.mouse(this));
})
.on('mouseout', function (d, i) {
var updated, arcData, callback;
if (transiting) { // skip while transiting
return;
}
updated = updateAngle(d);
arcData = convertToArcData(updated);
callback = getArcOnMouseOut();
// transitions
unexpandArc(updated.data.id);
revertLegend();
hideTooltip();
callback(arcData, i);
})
.on('click', function (d, i) {
var updated = updateAngle(d), arcData = convertToArcData(updated), callback = getArcOnClick();
callback(arcData, i);
});
mainPieEnter.append("text") mainPieEnter.append("text")
.attr("dy", ".35em") .attr("dy", ".35em")
.style("opacity", 0) .style("opacity", 0)
...@@ -3812,8 +3853,7 @@ ...@@ -3812,8 +3853,7 @@
.attr('class', classChartBar); .attr('class', classChartBar);
// Bars for each data // Bars for each data
contextBarEnter.append('g') contextBarEnter.append('g')
.attr("class", classBars) .attr("class", classBars);
.style("fill", function (d) { return color(d); });
//-- Line --// //-- Line --//
contextLineUpdate = context.select('.' + CLASS.chartLines).selectAll('.' + CLASS.chartLine) contextLineUpdate = context.select('.' + CLASS.chartLines).selectAll('.' + CLASS.chartLine)
...@@ -3823,10 +3863,8 @@ ...@@ -3823,10 +3863,8 @@
.style('opacity', 0) .style('opacity', 0)
.attr('class', classChartLine); .attr('class', classChartLine);
// Lines for each data // Lines for each data
contextLineEnter.append("path") contextLineEnter.append('g')
.attr("class", classLine) .attr("class", classLines);
.style("opacity", 0)
.style("stroke", function (d) { return color(d); });
} }
/*-- Show --*/ /*-- Show --*/
...@@ -4292,7 +4330,7 @@ ...@@ -4292,7 +4330,7 @@
return d3.merge( return d3.merge(
main.selectAll('.' + CLASS.shapes + getTargetSelectorSuffix(targetId)).selectAll('.' + CLASS.shape) main.selectAll('.' + CLASS.shapes + getTargetSelectorSuffix(targetId)).selectAll('.' + CLASS.shape)
.filter(function () { return d3.select(this).classed(CLASS.SELECTED); }) .filter(function () { return d3.select(this).classed(CLASS.SELECTED); })
.map(function (d) { return d.map(function (_d) { return _d.__data__; }); }) .map(function (d) { return d.map(function (d) { var data = d.__data__; return data.data ? data.data : data; }); })
); );
}; };
......
c3.min.js
View file @ 0bbdad66
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