Permalink
Browse files

Adding hover state to chart lines.

  • Loading branch information...
1 parent b412f99 commit 9f7e27660897410a5604cd7613365a90ccf68d89 @matthewhudson matthewhudson committed Apr 3, 2013
Showing with 6 additions and 0 deletions.
  1. +3 −0 sixpack/static/css/style.css
  2. +3 −0 sixpack/static/js/chart.js
@@ -235,6 +235,9 @@
fill: none;
stroke-width: 2.2px;
}
+.chart .line-hover {
+ stroke-width: 6px;
+}
.chart g.tick text {
font-weight: 400;
font-size: 12px;
@@ -97,6 +97,8 @@ $(function () {
my.svg.select("#" + line_id)
.data(data)
.on("mouseover", function (d) {
+ var currClass = d3.select(this).attr("class");
+ d3.select(this).attr("class", currClass + " line-hover");
$('.' + d3.event.target.id).closest('table').find('tr').removeClass('highlight');
$('.' + d3.event.target.id).addClass('highlight');
@@ -109,6 +111,7 @@ $(function () {
.style("opacity", 1);
})
.on("mouseout", function (d) {
+ d3.select(this).attr("class", "line");
var id = d3.event.target.id;
setTimeout(function () {

0 comments on commit 9f7e276

Please sign in to comment.