mirror of https://github.com/masayuki0812/c3.git
Quite good looking graph derived from d3.js
http://c3js.org
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
302 lines
12 KiB
302 lines
12 KiB
11 years ago
|
c3_chart_internal_fn.initEventRect = function () {
|
||
|
|
var $$ = this, CLASS = $$.CLASS;
|
||
|
|
$$.main.select('.' + CLASS[_chart]).append("g")
|
||
|
|
.attr("class", CLASS[_eventRects])
|
||
|
|
.style('fill-opacity', 0);
|
||
|
|
};
|
||
|
|
c3_chart_internal_fn.redrawEventRect = function () {
|
||
|
|
var $$ = this, config = $$.config, CLASS = $$.CLASS,
|
||
|
|
eventRectUpdate, maxDataCountTarget,
|
||
|
|
isMultipleX = $$.isMultipleX();
|
||
|
|
|
||
|
|
// rects for mouseover
|
||
|
|
var eventRects = $$.main.select('.' + CLASS[_eventRects])
|
||
|
|
.style('cursor', config[__zoom_enabled] ? config[__axis_rotated] ? 'ns-resize' : 'ew-resize' : null)
|
||
|
|
.classed(CLASS[_eventRectsMultiple], isMultipleX)
|
||
|
|
.classed(CLASS[_eventRectsSingle], !isMultipleX);
|
||
|
|
|
||
|
|
// clear old rects
|
||
|
|
eventRects.selectAll('.' + CLASS[_eventRect]).remove();
|
||
|
|
|
||
|
|
// open as public variable
|
||
|
|
$$.eventRect = eventRects.selectAll('.' + CLASS[_eventRect]);
|
||
|
|
|
||
|
|
if (isMultipleX) {
|
||
|
|
eventRectUpdate = $$.eventRect.data([0]);
|
||
|
|
// enter : only one rect will be added
|
||
|
|
$$.generateEventRectsForMultipleXs(eventRectUpdate.enter());
|
||
|
|
// update
|
||
|
|
$$.updateEventRect(eventRectUpdate);
|
||
|
|
// exit : not needed because always only one rect exists
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
// Set data and update $$.eventRect
|
||
|
|
maxDataCountTarget = $$.getMaxDataCountTarget($$.data.targets);
|
||
|
|
eventRects.datum(maxDataCountTarget ? maxDataCountTarget.values : []);
|
||
|
|
$$.eventRect = eventRects.selectAll('.' + CLASS[_eventRect]);
|
||
|
|
eventRectUpdate = $$.eventRect.data(function (d) { return d; });
|
||
|
|
// enter
|
||
|
|
$$.generateEventRectsForSingleX(eventRectUpdate.enter());
|
||
|
|
// update
|
||
|
|
$$.updateEventRect(eventRectUpdate);
|
||
|
|
// exit
|
||
|
|
eventRectUpdate.exit().remove();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
c3_chart_internal_fn.updateEventRect = function (eventRectUpdate) {
|
||
|
|
var $$ = this, config = $$.config,
|
||
|
|
x, y, w, h, rectW, rectX;
|
||
|
|
|
||
|
|
// set update selection if null
|
||
|
|
eventRectUpdate = eventRectUpdate || $$.eventRect.data(function (d) { return d; });
|
||
|
|
|
||
|
|
if ($$.isMultipleX()) {
|
||
|
|
// TODO: rotated not supported yet
|
||
|
|
x = 0;
|
||
|
|
y = 0;
|
||
|
|
w = $$.width;
|
||
|
|
h = $$.height;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if (($$.isCustomX() || $$.isTimeSeries()) && !$$.isCategorized()) {
|
||
|
|
rectW = function (d) {
|
||
|
|
var prevX = $$.getPrevX(d.index), nextX = $$.getNextX(d.index), dx = $$.data.xs[d.id][d.index],
|
||
|
|
w = ($$.x(nextX ? nextX : dx) - $$.x(prevX ? prevX : dx)) / 2;
|
||
|
|
return w < 0 ? 0 : w;
|
||
|
|
};
|
||
|
|
rectX = function (d) {
|
||
|
|
var prevX = $$.getPrevX(d.index), dx = $$.data.xs[d.id][d.index];
|
||
|
|
return ($$.x(dx) + $$.x(prevX ? prevX : dx)) / 2;
|
||
|
|
};
|
||
|
|
} else {
|
||
|
|
rectW = $$.getEventRectWidth();
|
||
|
|
rectX = function (d) {
|
||
|
|
return $$.x(d.x) - (rectW / 2);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
x = config[__axis_rotated] ? 0 : rectX;
|
||
|
|
y = config[__axis_rotated] ? rectX : 0;
|
||
|
|
w = config[__axis_rotated] ? $$.width : rectW;
|
||
|
|
h = config[__axis_rotated] ? rectW : $$.height;
|
||
|
|
}
|
||
|
|
|
||
|
|
eventRectUpdate
|
||
|
|
.attr('class', $$.classEvent.bind($$))
|
||
|
|
.attr("x", x)
|
||
|
|
.attr("y", y)
|
||
|
|
.attr("width", w)
|
||
|
|
.attr("height", h);
|
||
|
|
};
|
||
|
|
c3_chart_internal_fn.generateEventRectsForSingleX = function (eventRectEnter) {
|
||
|
|
var $$ = this, d3 = $$.d3, config = $$.config;
|
||
|
|
eventRectEnter.append("rect")
|
||
|
|
.attr("class", generateCall($$.classEvent, $$))
|
||
|
|
.style("cursor", config[__data_selection_enabled] && config[__data_selection_grouped] ? "pointer" : null)
|
||
|
|
.on('mouseover', function (d) {
|
||
|
|
var index = d.index, selectedData, newData;
|
||
|
|
|
||
|
|
if ($$.dragging) { return; } // do nothing if dragging
|
||
|
|
if ($$.hasArcType()) { return; }
|
||
|
|
|
||
|
|
selectedData = $$.data.targets.map(function (t) {
|
||
|
|
return $$.addName($$.getValueOnIndex(t.values, index));
|
||
|
|
});
|
||
|
|
|
||
|
|
// Sort selectedData as names order
|
||
|
|
newData = [];
|
||
|
|
Object.keys(config[__data_names]).forEach(function (id) {
|
||
|
|
for (var j = 0; j < selectedData.length; j++) {
|
||
|
|
if (selectedData[j] && selectedData[j].id === id) {
|
||
|
|
newData.push(selectedData[j]);
|
||
|
|
selectedData.shift(j);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
selectedData = newData.concat(selectedData); // Add remained
|
||
|
|
|
||
|
|
// Expand shapes for selection
|
||
|
|
if (config[__point_focus_expand_enabled]) { $$.expandCircles(index); }
|
||
|
|
$$.expandBars(index);
|
||
|
|
|
||
|
|
// Call event handler
|
||
|
|
$$.main.selectAll('.' + CLASS[_shape] + '-' + index).each(function (d) {
|
||
|
|
config[__data_onmouseover].call(c3, d);
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.on('mouseout', function (d) {
|
||
|
|
var index = d.index;
|
||
|
|
if ($$.hasArcType()) { return; }
|
||
|
|
$$.hideXGridFocus();
|
||
|
|
$$.hideTooltip();
|
||
|
|
// Undo expanded shapes
|
||
|
|
$$.unexpandCircles(index);
|
||
|
|
$$.unexpandBars();
|
||
|
|
// Call event handler
|
||
|
|
$$.main.selectAll('.' + CLASS[_shape] + '-' + index).each(function (d) {
|
||
|
|
config[__data_onmouseout].call($$, d);
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.on('mousemove', function (d) {
|
||
|
|
var selectedData, index = d.index,
|
||
|
|
eventRect = $$.svg.select('.' + CLASS[_eventRect] + '-' + index);
|
||
|
|
|
||
|
|
if ($$.dragging) { return; } // do nothing when dragging
|
||
|
|
if ($$.hasArcType()) { return; }
|
||
|
|
|
||
|
|
// Show tooltip
|
||
|
|
selectedData = $$.filterTargetsToShow($$.data.targets).map(function (t) {
|
||
|
|
return $$.addName($$.getValueOnIndex(t.values, index));
|
||
|
|
});
|
||
|
|
|
||
|
|
if (config[__tooltip_grouped]) {
|
||
|
|
$$.showTooltip(selectedData, d3.mouse(this));
|
||
|
|
$$.showXGridFocus(selectedData);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (config[__tooltip_grouped] && (!config[__data_selection_enabled] || config[__data_selection_grouped])) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
$$.main.selectAll('.' + CLASS[_shape] + '-' + index)
|
||
|
|
.each(function () {
|
||
|
|
d3.select(this).classed(CLASS[_EXPANDED], true);
|
||
|
|
if (config[__data_selection_enabled]) {
|
||
|
|
eventRect.style('cursor', config[__data_selection_grouped] ? 'pointer' : null);
|
||
|
|
}
|
||
|
|
if (!config[__tooltip_grouped]) {
|
||
|
|
$$.hideXGridFocus();
|
||
|
|
$$.hideTooltip();
|
||
|
|
if (!config[__data_selection_grouped]) {
|
||
|
|
$$.unexpandCircles(index);
|
||
|
|
$$.unexpandBars();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.filter(function (d) {
|
||
|
|
if (this.nodeName === 'circle') {
|
||
|
|
return $$.isWithinCircle(this, $$.pointSelectR(d));
|
||
|
|
}
|
||
|
|
else if (this.nodeName === 'path') {
|
||
|
|
return $$.isWithinBar(this);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.each(function (d) {
|
||
|
|
if (config[__data_selection_enabled] && (config[__data_selection_grouped] || config[__data_selection_isselectable](d))) {
|
||
|
|
eventRect.style('cursor', 'pointer');
|
||
|
|
}
|
||
|
|
if (!config[__tooltip_grouped]) {
|
||
|
|
$$.showTooltip([d], d3.mouse(this));
|
||
|
|
$$.showXGridFocus([d]);
|
||
|
|
if (config[__point_focus_expand_enabled]) { $$.expandCircles(index, d.id); }
|
||
|
|
$$.expandBars(index, d.id);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.on('click', function (d) {
|
||
|
|
var index = d.index;
|
||
|
|
if ($$.hasArcType() || !$$.toggleShape) { return; }
|
||
|
|
if ($$.cancelClick) {
|
||
|
|
$$.cancelClick = false;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
$$.main.selectAll('.' + CLASS[_shape] + '-' + index).each(function (d) {
|
||
|
|
$$.toggleShape(this, d, index);
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.call(
|
||
|
|
d3.behavior.drag().origin(Object)
|
||
|
|
.on('drag', function () { $$.drag(d3.mouse(this)); })
|
||
|
|
.on('dragstart', function () { $$.dragstart(d3.mouse(this)); })
|
||
|
|
.on('dragend', function () { $$.dragend(); })
|
||
|
|
)
|
||
|
|
.on("dblclick.zoom", null);
|
||
|
|
};
|
||
|
|
|
||
|
|
c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter) {
|
||
|
|
var $$ = this, d3 = $$.d3, config = $$.config;
|
||
|
|
eventRectEnter.append('rect')
|
||
|
|
.attr('x', 0)
|
||
|
|
.attr('y', 0)
|
||
|
|
.attr('width', $$.width)
|
||
|
|
.attr('height', $$.height)
|
||
|
|
.attr('class', CLASS[_eventRect])
|
||
|
|
.on('mouseout', function () {
|
||
|
|
if ($$.hasArcType()) { return; }
|
||
|
|
$$.hideXGridFocus();
|
||
|
|
$$.hideTooltip();
|
||
|
|
$$.unexpandCircles();
|
||
|
|
})
|
||
|
|
.on('mousemove', function () {
|
||
|
|
var targetsToShow = $$.filterTargetsToShow($$.data.targets);
|
||
|
|
var mouse, closest, sameXData, selectedData;
|
||
|
|
|
||
|
|
if ($$.dragging) { return; } // do nothing when dragging
|
||
|
|
if ($$.hasArcType(targetsToShow)) { return; }
|
||
|
|
|
||
|
|
mouse = d3.mouse(this);
|
||
|
|
closest = $$.findClosestFromTargets(targetsToShow, mouse);
|
||
|
|
|
||
|
|
if (! closest) { return; }
|
||
|
|
|
||
|
|
if ($$.isScatterType(closest)) {
|
||
|
|
sameXData = [closest];
|
||
|
|
} else {
|
||
|
|
sameXData = $$.filterSameX(targetsToShow, closest.x);
|
||
|
|
}
|
||
|
|
|
||
|
|
// show tooltip when cursor is close to some point
|
||
|
|
selectedData = sameXData.map(function (d) {
|
||
|
|
return $$.addName(d);
|
||
|
|
});
|
||
|
|
$$.showTooltip(selectedData, mouse);
|
||
|
|
|
||
|
|
// expand points
|
||
|
|
if (config[__point_focus_expand_enabled]) {
|
||
|
|
$$.unexpandCircles();
|
||
|
|
$$.expandCircles(closest.index, closest.id);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Show xgrid focus line
|
||
|
|
$$.showXGridFocus(selectedData);
|
||
|
|
|
||
|
|
// Show cursor as pointer if point is close to mouse position
|
||
|
|
if ($$.dist(closest, mouse) < 100) {
|
||
|
|
$$.svg.select('.' + CLASS[_eventRect]).style('cursor', 'pointer');
|
||
|
|
if (!$$.mouseover) {
|
||
|
|
config[__data_onmouseover].call($$, closest);
|
||
|
|
$$.mouseover = true;
|
||
|
|
}
|
||
|
|
} else if ($$.mouseover) {
|
||
|
|
$$.svg.select('.' + CLASS[_eventRect]).style('cursor', null);
|
||
|
|
config[__data_onmouseout].call($$, closest);
|
||
|
|
$$.mouseover = false;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.on('click', function () {
|
||
|
|
var targetsToShow = $$.filterTargetsToShow($$.data.targets);
|
||
|
|
var mouse, closest;
|
||
|
|
|
||
|
|
if ($$.hasArcType(targetsToShow)) { return; }
|
||
|
|
|
||
|
|
mouse = d3.mouse(this);
|
||
|
|
closest = $$.findClosestFromTargets(targetsToShow, mouse);
|
||
|
|
|
||
|
|
if (! closest) { return; }
|
||
|
|
|
||
|
|
// select if selection enabled
|
||
|
|
if ($$.dist(closest, mouse) < 100 && $$.toggleShape) {
|
||
|
|
$$.main.select('.' + CLASS[_circles] + $$.getTargetSelectorSuffix(closest.id)).select('.' + CLASS[_circle] + '-' + closest.index).each(function () {
|
||
|
|
$$.toggleShape(this, closest, closest.index);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.call(
|
||
|
|
d3.behavior.drag().origin(Object)
|
||
|
|
.on('drag', function () { $$.drag(d3.mouse(this)); })
|
||
|
|
.on('dragstart', function () { $$.dragstart(d3.mouse(this)); })
|
||
|
|
.on('dragend', function () { $$.dragend(); })
|
||
|
|
)
|
||
|
|
.on("dblclick.zoom", null);
|
||
|
|
};
|