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

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

pull/200/merge
Masayuki Tanaka 11 years ago
parent
271ddb5569
commit
0bbdad66d2
2 changed files with 150 additions and 112 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. 252
      c3.js
  2. 6
      c3.min.js

252
c3.js
Unescape View File

@ -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 @@
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 @@
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 @@
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 @@
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 @@
.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)) {
isWithin = isWithinBar(that);
toggle = toggleBar; 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 @@
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 @@
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 @@
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 @@
.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 @@
.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 @@
.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 @@
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 @@
.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,12 +3793,10 @@
// 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')
@ -3720,21 +3804,17 @@
.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 @@
.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 @@
.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 @@
.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 @@
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; }); })
); );
}; };

6
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save