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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 256
      c3.js
  2. 6
      c3.min.js

256
c3.js
Unescape View File

@ -33,12 +33,15 @@
shape: 'c3-shape',
shapes: 'c3-shapes',
line: 'c3-line',
lines: 'c3-lines',
bar: 'c3-bar',
bars: 'c3-bars',
circle: 'c3-circle',
circles: 'c3-circles',
arc: 'c3-arc',
arcs: 'c3-arcs',
area: 'c3-area',
areas: 'c3-areas',
text: 'c3-text',
texts: 'c3-texts',
grid: 'c3-grid',
@ -1738,13 +1741,16 @@
function classTexts(d) { return generateClass(CLASS.texts, d.id); }
function classShape(d, i) { return generateClass(CLASS.shape, i); }
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 classCircles(d) { return classShapes(d) + generateClass(CLASS.circles, d.id); }
function classBar(d, i) { return classShape(d, i) + generateClass(CLASS.bar, i); }
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 classArea(d) { return classShapes(d) + generateClass(CLASS.area, d.id); }
function classArc(d) { return classShape(d.data) + generateClass(CLASS.arc, d.data.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 classEvent(d, i) { return generateClass(CLASS.eventRect, i); }
function classTarget(id) {
@ -2130,10 +2136,13 @@
function isArcType(d) {
return isPieType(d) || isDonutType(d);
}
/* not used
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) {
return isScatterType(d) ? d.values : [];
}
@ -2270,7 +2279,7 @@
function selectBar(target, d) {
__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) {
__data_onunselected(d, target.node());
@ -2279,6 +2288,9 @@
function toggleBar(selected, 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) {
return data.filter(function (d) { return isValue(d.value); });
@ -3026,17 +3038,20 @@
.call(zoom).on("dblclick.zoom", null);
}
function toggleShape(target, d, i) {
var shape = d3.select(target),
isSelected = shape.classed(CLASS.SELECTED);
var isWithin = false, toggle;
if (target.nodeName === 'circle') {
isWithin = isWithinCircle(target, pointSelectR(d) * 1.5);
function toggleShape(that, d, i) {
var shape = d3.select(that), isSelected = shape.classed(CLASS.SELECTED), isWithin, toggle;
if (that.nodeName === 'circle') {
isWithin = isWithinCircle(that, pointSelectR(d) * 1.5);
toggle = togglePoint;
}
else if (target.nodeName === 'path') {
isWithin = isWithinBar(target);
toggle = toggleBar;
else if (that.nodeName === 'path') {
if (shape.classed(CLASS.bar)) {
isWithin = isWithinBar(that);
toggle = toggleBar;
} else { // would be arc
isWithin = true;
toggle = toggleArc;
}
}
if (__data_selection_grouped || isWithin) {
if (__data_selection_enabled && __data_selection_isselectable(d)) {
@ -3049,7 +3064,7 @@
shape.classed(CLASS.SELECTED, !isSelected);
toggle(!isSelected, shape, d, i);
}
__data_onclick(d, target);
__data_onclick(d, that);
}
}
@ -3133,7 +3148,7 @@
function redraw(options) {
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 rectX, rectW;
var withY, withSubchart, withTransition, withTransitionForExit, withTransitionForAxis, withTransform, withUpdateXDomain, withUpdateOrgXDomain, withLegend;
@ -3380,11 +3395,9 @@
mainBar = main.selectAll('.' + CLASS.bars).selectAll('.' + CLASS.bar)
.data(barData);
mainBar.enter().append('path')
.attr('d', drawBar)
.attr("class", classBar)
.style("stroke", 'none')
.style("opacity", 0)
.style("fill", function (d) { return color(d); })
.attr("class", classBar);
.style("fill", color);
mainBar
.style("opacity", initialOpacity)
.transition().duration(duration)
@ -3394,41 +3407,40 @@
.style('opacity', 0)
.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
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)
.transition().duration(duration)
.attr("d", lineOnMain)
.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)
.transition().duration(duration)
.attr("d", areaOnMain)
.style("opacity", orgAreaOpacity);
mainArea.exit().transition().duration(durationForExit)
.style('opacity', 0)
.remove();
mainCircle = main.selectAll('.' + CLASS.circles).selectAll('.' + CLASS.circle)
.data(lineOrScatterData);
mainCircle.enter().append("circle")
.attr("class", classCircle)
.style('opacity', 0)
.attr("r", pointR);
mainCircle
.style("opacity", initialOpacity)
@ -3438,10 +3450,74 @@
.attr("cy", __axis_rotated ? circleX : circleY);
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
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)" : "")
.style("opacity", function (d) { return d === this._current ? 0 : 1; })
.each(function () { transiting = true; })
.transition().duration(duration)
.attrTween("d", function (d) {
var updated = updateAngle(d), interpolate;
@ -3465,6 +3541,9 @@
.call(endall, function () {
transiting = false;
});
mainArc.exit().transition().duration(durationForExit)
.style('opacity', 0)
.remove();
main.selectAll('.' + CLASS.chartArc).select('text')
.attr("transform", transformForArcLabel)
.style("opacity", 0)
@ -3498,10 +3577,9 @@
contextBar = context.selectAll('.' + CLASS.bars).selectAll('.' + CLASS.bar)
.data(barData);
contextBar.enter().append('path')
.attr('d', drawBarOnSub)
.attr("class", classBar)
.style("stroke", 'none')
.style("fill", function (d) { return color(d); })
.attr("class", classBar);
.style("fill", color);
contextBar
.style("opacity", initialOpacity)
.transition().duration(duration)
@ -3511,11 +3589,19 @@
.style('opacity', 0)
.remove();
// 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)
.transition().duration(duration)
.attr("d", lineOnSub)
.style('opacity', 1);
contextLine.exit().transition().duration(duration)
.style('opacity', 0)
.remove();
}
}
@ -3707,34 +3793,28 @@
// Bars for each data
mainBarEnter.append('g')
.attr("class", classBars)
.style("stroke", "none")
.style("cursor", function (d) { return __data_selection_isselectable(d) ? "pointer" : null; });
//-- Line --//
mainLineUpdate = main.select('.' + CLASS.chartLines)
.selectAll('.' + CLASS.chartLine)
mainLineUpdate = main.select('.' + CLASS.chartLines).selectAll('.' + CLASS.chartLine)
.data(targets)
.attr('class', classChartLine);
.attr('class', classChartLine);
mainLineEnter = mainLineUpdate.enter().append('g')
.attr('class', classChartLine)
.style('opacity', 0)
.style("pointer-events", "none");
// Lines for each data
mainLineEnter.append("path")
.attr("class", classLine)
.style("opacity", 0)
.style("stroke", function (d) { return color(d); });
mainLineEnter.append('g')
.attr("class", classLines);
// Areas
mainLineEnter.append("path")
.attr("class", classArea)
.style("opacity", function () { orgAreaOpacity = +d3.select(this).style('opacity'); return 0; })
.style("fill", function (d) { return color(d); });
mainLineEnter.append('g')
.attr('class', classAreas);
// Circles for each data point on lines
mainLineEnter.append('g')
.attr("class", function (d) { return generateClass(CLASS.selectedCircles, d.id); });
mainLineEnter.append('g')
.attr("class", classCircles)
.style("fill", function (d) { return color(d); })
.style("fill", color)
.style("cursor", function (d) { return __data_selection_isselectable(d) ? "pointer" : null; });
// Update date for selected circles
targets.forEach(function (t) {
@ -3751,47 +3831,8 @@
.attr("class", classChartArc);
mainPieEnter = mainPieUpdate.enter().append("g")
.attr("class", classChartArc);
mainPieEnter.append("path")
.attr("class", classArc)
.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('g')
.attr('class', classArcs);
mainPieEnter.append("text")
.attr("dy", ".35em")
.style("opacity", 0)
@ -3812,8 +3853,7 @@
.attr('class', classChartBar);
// Bars for each data
contextBarEnter.append('g')
.attr("class", classBars)
.style("fill", function (d) { return color(d); });
.attr("class", classBars);
//-- Line --//
contextLineUpdate = context.select('.' + CLASS.chartLines).selectAll('.' + CLASS.chartLine)
@ -3823,10 +3863,8 @@
.style('opacity', 0)
.attr('class', classChartLine);
// Lines for each data
contextLineEnter.append("path")
.attr("class", classLine)
.style("opacity", 0)
.style("stroke", function (d) { return color(d); });
contextLineEnter.append('g')
.attr("class", classLines);
}
/*-- Show --*/
@ -4292,7 +4330,7 @@
return d3.merge(
main.selectAll('.' + CLASS.shapes + getTargetSelectorSuffix(targetId)).selectAll('.' + CLASS.shape)
.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