From 12d3444c7f970280ec7334b5dca31de44e006e23 Mon Sep 17 00:00:00 2001 From: Abhas Bhattacharya Date: Fri, 17 Mar 2017 06:40:03 +0530 Subject: [PATCH] dded tooltip + beautified column chart --- index.html | 1 + js/app.js | 6 +- js/draw-chart.js | 56 +++++++-- lib/d3-tip.js | 320 +++++++++++++++++++++++++++++++++++++++++++++++ style.css | 3 +- 5 files changed, 376 insertions(+), 10 deletions(-) create mode 100644 lib/d3-tip.js diff --git a/index.html b/index.html index 81abcb7..1b13aa5 100644 --- a/index.html +++ b/index.html @@ -61,6 +61,7 @@ + diff --git a/js/app.js b/js/app.js index ee80e7c..a50af69 100644 --- a/js/app.js +++ b/js/app.js @@ -137,7 +137,11 @@ app.controller("mainController", ["allData","$scope",function (allData,$scope) { chartData.push({"x":keys[i],"y":tmpData[keys[i]]}); } - drawChart(chartData); + drawChart(chartData,[$scope.data.chosenDimension,$scope.data.chosenMeasure]); + } + else + { + cleanChart(); } }); }]); diff --git a/js/draw-chart.js b/js/draw-chart.js index 7a24c01..fcb807e 100644 --- a/js/draw-chart.js +++ b/js/draw-chart.js @@ -1,14 +1,14 @@ -function drawChart(data) +function drawChart(data,axisLabel) { var eleChart = d3.select(".chart").html(""), eleChartBbox = eleChart.node().getBoundingClientRect(), - margin = {top: 20, right: 20, bottom: 30, left: 40}, + margin = {top: 35, right: 20, bottom: 60, left: 70}, width = +eleChartBbox.width - margin.left - margin.right, height = +eleChartBbox.height - margin.top - margin.bottom; - var svg = eleChart.append("svg").attr("width",width).attr("height",height); + var svg = eleChart.append("svg").attr("width",eleChartBbox.width).attr("height",eleChartBbox.height); - var x = d3.scaleBand().rangeRound([0, width]).padding(0.1), + var x = d3.scaleBand().rangeRound([0, width]).padding(0.25), y = d3.scaleLinear().rangeRound([height, 0]); var g = svg.append("g") @@ -20,19 +20,48 @@ function drawChart(data) g.append("g") .attr("class", "axis axis-x") + .style("font-size",".75em") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); g.append("g") .attr("class", "axis axis-y") - .call(d3.axisLeft(y).ticks(10, "%")) + .style("font-size",".75em") + .call(d3.axisLeft(y).ticks(10)) .append("text") - .attr("transform", "rotate(-90)") + .attr("transform", "translate(15,0) rotate(-90)") .attr("y", 6) .attr("dy", "0.71em") .attr("text-anchor", "end") .text("y"); + var xLabel = ((axisLabel.length == 2) && axisLabel[0] ) || "X-label"; + var yLabel = ((axisLabel.length == 2) && axisLabel[1] ) || "Y-label"; + + var xLabelPos = d3.select(".axis-x").node().getBBox().height*2 + height; + var yLabelPos = -d3.select(".axis-y").node().getBBox().width*0.65; + + g + .append('g').classed("label-x",true) + .attr('transform', 'translate(' + (width/2) + ', ' + xLabelPos + ')') + .append('text') + .attr('text-anchor', 'middle') + .text(xLabel); + + g + .append('g').classed("label-y",true) + .attr('transform', 'translate(' + yLabelPos + ', ' + (height/2) + ') rotate(-90)') + .append('text') + .attr('text-anchor', 'middle') + .attr("shape-rendering","crispEdges") + .text(yLabel); + + var tip_points = d3.tip() + .attr('class', 'd3-tip') + .html(function(d) { return d.y; }); + + var vis = svg.call(tip_points); + g.selectAll(".bar") .data(data) .enter().append("rect") @@ -40,7 +69,18 @@ function drawChart(data) .attr("x", function(d) { return x(d.x); }) .attr("y", function(d) { return y(d.y); }) .attr("width", x.bandwidth()) - .attr("height", function(d) { return height - y(d.y); }); + .attr("height", function(d) { return height - y(d.y); }) + .on('mouseover', function () { + tip_points.show.apply(this,arguments); + + }) + .on('mouseout', function () { + tip_points.hide.apply(this,arguments); + + }); } - \ No newline at end of file + +function cleanChart() { + var eleChart = d3.select(".chart").html(""); +} \ No newline at end of file diff --git a/lib/d3-tip.js b/lib/d3-tip.js new file mode 100644 index 0000000..df76d41 --- /dev/null +++ b/lib/d3-tip.js @@ -0,0 +1,320 @@ +// d3.tip +// Copyright (c) 2013 Justin Palmer +// ES6 / D3 v4 Adaption Copyright (c) 2016 Constantin Gavrilete +// Removal of ES6 for D3 v4 Adaption Copyright (c) 2016 David Gotz +// +// Tooltips for d3.js SVG visualizations + +d3.functor = function functor(v) { + return typeof v === "function" ? v : function() { + return v; + }; +}; + +d3.tip = function() { + + var direction = d3_tip_direction, + offset = d3_tip_offset, + html = d3_tip_html, + node = initNode(), + svg = null, + point = null, + target = null + + function tip(vis) { + svg = getSVGNode(vis) + point = svg.createSVGPoint() + document.body.appendChild(node) + } + + // Public - show the tooltip on the screen + // + // Returns a tip + tip.show = function() { + var args = Array.prototype.slice.call(arguments) + if(args[args.length - 1] instanceof SVGElement) target = args.pop() + + var content = html.apply(this, args), + poffset = offset.apply(this, args), + dir = direction.apply(this, args), + nodel = getNodeEl(), + i = directions.length, + coords, + scrollTop = document.documentElement.scrollTop || document.body.scrollTop, + scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft + + nodel.html(content) + .style('position', 'absolute') + .style('opacity', 1) + .style('pointer-events', 'all') + + while(i--) nodel.classed(directions[i], false) + coords = direction_callbacks[dir].apply(this) + nodel.classed(dir, true) + .style('top', (coords.top + poffset[0]) + scrollTop + 'px') + .style('left', (coords.left + poffset[1]) + scrollLeft + 'px') + + return tip + } + + // Public - hide the tooltip + // + // Returns a tip + tip.hide = function() { + var nodel = getNodeEl() + nodel + .style('opacity', 0) + .style('pointer-events', 'none') + return tip + } + + // Public: Proxy attr calls to the d3 tip container. Sets or gets attribute value. + // + // n - name of the attribute + // v - value of the attribute + // + // Returns tip or attribute value + tip.attr = function(n, v) { + if (arguments.length < 2 && typeof n === 'string') { + return getNodeEl().attr(n) + } else { + var args = Array.prototype.slice.call(arguments) + d3.selection.prototype.attr.apply(getNodeEl(), args) + } + + return tip + } + + // Public: Proxy style calls to the d3 tip container. Sets or gets a style value. + // + // n - name of the property + // v - value of the property + // + // Returns tip or style property value + tip.style = function(n, v) { + // debugger; + if (arguments.length < 2 && typeof n === 'string') { + return getNodeEl().style(n) + } else { + var args = Array.prototype.slice.call(arguments); + if (args.length === 1) { + var styles = args[0]; + Object.keys(styles).forEach(function(key) { + return d3.selection.prototype.style.apply(getNodeEl(), [key, styles[key]]); + }); + } + } + + return tip + } + + // Public: Set or get the direction of the tooltip + // + // v - One of n(north), s(south), e(east), or w(west), nw(northwest), + // sw(southwest), ne(northeast) or se(southeast) + // + // Returns tip or direction + tip.direction = function(v) { + if (!arguments.length) return direction + direction = v == null ? v : d3.functor(v) + + return tip + } + + // Public: Sets or gets the offset of the tip + // + // v - Array of [x, y] offset + // + // Returns offset or + tip.offset = function(v) { + if (!arguments.length) return offset + offset = v == null ? v : d3.functor(v) + + return tip + } + + // Public: sets or gets the html value of the tooltip + // + // v - String value of the tip + // + // Returns html value or tip + tip.html = function(v) { + if (!arguments.length) return html + html = v == null ? v : d3.functor(v) + + return tip + } + + // Public: destroys the tooltip and removes it from the DOM + // + // Returns a tip + tip.destroy = function() { + if(node) { + getNodeEl().remove(); + node = null; + } + return tip; + } + + function d3_tip_direction() { return 'n' } + function d3_tip_offset() { return [0, 0] } + function d3_tip_html() { return ' ' } + + var direction_callbacks = { + n: direction_n, + s: direction_s, + e: direction_e, + w: direction_w, + nw: direction_nw, + ne: direction_ne, + sw: direction_sw, + se: direction_se + }; + + var directions = Object.keys(direction_callbacks); + + function direction_n() { + var bbox = getScreenBBox() + return { + top: bbox.n.y - node.offsetHeight, + left: bbox.n.x - node.offsetWidth / 2 + } + } + + function direction_s() { + var bbox = getScreenBBox() + return { + top: bbox.s.y, + left: bbox.s.x - node.offsetWidth / 2 + } + } + + function direction_e() { + var bbox = getScreenBBox() + return { + top: bbox.e.y - node.offsetHeight / 2, + left: bbox.e.x + } + } + + function direction_w() { + var bbox = getScreenBBox() + return { + top: bbox.w.y - node.offsetHeight / 2, + left: bbox.w.x - node.offsetWidth + } + } + + function direction_nw() { + var bbox = getScreenBBox() + return { + top: bbox.nw.y - node.offsetHeight, + left: bbox.nw.x - node.offsetWidth + } + } + + function direction_ne() { + var bbox = getScreenBBox() + return { + top: bbox.ne.y - node.offsetHeight, + left: bbox.ne.x + } + } + + function direction_sw() { + var bbox = getScreenBBox() + return { + top: bbox.sw.y, + left: bbox.sw.x - node.offsetWidth + } + } + + function direction_se() { + var bbox = getScreenBBox() + return { + top: bbox.se.y, + left: bbox.e.x + } + } + + function initNode() { + var node = d3.select(document.createElement('div')) + node + .style('position', 'absolute') + .style('top', 0) + .style('opacity', 0) + .style('pointer-events', 'none') + .style('box-sizing', 'border-box') + + return node.node() + } + + function getSVGNode(el) { + el = el.node() + if(el.tagName.toLowerCase() === 'svg') + return el + + return el.ownerSVGElement + } + + function getNodeEl() { + if(node === null) { + node = initNode(); + // re-add node to DOM + document.body.appendChild(node); + }; + return d3.select(node); + } + + // Private - gets the screen coordinates of a shape + // + // Given a shape on the screen, will return an SVGPoint for the directions + // n(north), s(south), e(east), w(west), ne(northeast), se(southeast), nw(northwest), + // sw(southwest). + // + // +-+-+ + // | | + // + + + // | | + // +-+-+ + // + // Returns an Object {n, s, e, w, nw, sw, ne, se} + function getScreenBBox() { + var targetel = target || d3.event.target; + + while ('undefined' === typeof targetel.getScreenCTM && 'undefined' === targetel.parentNode) { + targetel = targetel.parentNode; + } + + var bbox = {}, + matrix = targetel.getScreenCTM(), + tbbox = targetel.getBBox(), + width = tbbox.width, + height = tbbox.height, + x = tbbox.x, + y = tbbox.y + + point.x = x + point.y = y + bbox.nw = point.matrixTransform(matrix) + point.x += width + bbox.ne = point.matrixTransform(matrix) + point.y += height + bbox.se = point.matrixTransform(matrix) + point.x -= width + bbox.sw = point.matrixTransform(matrix) + point.y -= height / 2 + bbox.w = point.matrixTransform(matrix) + point.x += width + bbox.e = point.matrixTransform(matrix) + point.x -= width / 2 + point.y -= height / 2 + bbox.n = point.matrixTransform(matrix) + point.y += height + bbox.s = point.matrixTransform(matrix) + + return bbox + } + + return tip +}; \ No newline at end of file diff --git a/style.css b/style.css index 7079410..db9e9f6 100644 --- a/style.css +++ b/style.css @@ -100,7 +100,8 @@ body width: 100%; height: 100%; - background-color: lightgray; + /*background-color: lightgray;*/ + overflow: hidden; } ul.unstyled-list