D3 - BarChart Series Tooltip
Fiddle forked from [D3 - 2 Quadrant Bar Chart](https://jsfiddle.net/bradyhouse/q28d9emo/). This version realizes
the following additional requirements: (1) on series mouse over, a fixed position tooltip appears describing the
the series data (label / y); (2) on series mouse out, the tooltip disappears; (3) on series click,
an alert message should open displaying the series' json.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
<tooltip></tooltip>
<chart></chart>
JavaScript
(function(app, $, undefined) {
"use strict";
let metadata = {
fiddleHeader: 'D3 - Bar Chart Tooltip',
urls: {
github: 'https://github.com/bradyhouse/house/tree/master/fiddles/d3/fiddle-0028-BarChartTooltips'
},
consoleTag: 'H O U S E ~ f i d d l e s'
};
function barChart() {
let _chart = {},
_duration = 1000,
_margins = {
top: 30,
left: 40,
right: 0,
bottom: 30
},
_width = window.innerWidth - _margins.left - _margins.right,
_height = window.innerHeight - _margins.top - _margins.bottom,
_xAxis, _yAxis,
_forceY = [0],
_data = [],
_valueFormat = d3.format(',.2f'),
_svg,
_bodyG,
_snapshot = false,
getX = function(d) {
return d.x
},
getY = function(d) {
return d.y
},
x = d3.scale.ordinal(),
y = d3.scale.linear(),
x0, y0;
function defineAxesAndScales() {
x.domain(_data.map(function(d) {
return d.label;
}))
.rangeBands([0, quadrantWidth()], .1);
_xAxis = d3.svg.axis().scale(x).orient("bottom");
y.domain(d3.extent(_data.map(function(d) {
return d.y
}).concat(_forceY)));
y.range([quadrantHeight() - (y.domain()[0] < 0 ? 12 : 0), y.domain()[1] > 0 ? 12 : 0]);
_yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(3)
.tickSubdivide(0)
.tickFormat(function(v) {
return v + " X";
});
x0 = x;
y0 = y.copy().range([y(0), y(0)]);
}
function defineBodyClip(svg) {
var padding = 5;
svg.append("defs")
.append("clipPath")
.attr("id", "body-clip")
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", quadrantWidth() + 2 * padding)
.attr("height", quadrantHeight());
}
function quadrantWidth() {
return _width - _margins.left - _margins.right;
}
...