From 163c1bafc405c92c62c3bc49ceed598f050547fe Mon Sep 17 00:00:00 2001
From: johnwalley <john@walley.org.uk>
Date: Thu, 22 Dec 2016 16:37:09 +0000
Subject: [PATCH] Dim background when a crew is selected

---
 package.json | 2 +-
 src/chart.js | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 791533a..98bc8b1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "d3-bumps-chart",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Draw bumps charts.",
   "keywords": [
     "d3",
diff --git a/src/chart.js b/src/chart.js
index 7b3db76..4e68989 100644
--- a/src/chart.js
+++ b/src/chart.js
@@ -76,7 +76,7 @@ export default function () {
     const widthWithoutLines = 310;
     const initialViewBoxX = -165;
     const initialViewBoxY = 0;
-    const transitionLength = 500;
+    const transitionLength = 400;
     const startLabelPosition = 0;
     const finishLabelPosition = 4;
     const numbersLeftPosition = -8;
@@ -227,12 +227,14 @@ export default function () {
       .style('filter', d => (d.highlighted || d.hover ? 'url(#dropShadow)' : ''))
       .style('fill', 'none')
       .style('stroke', d => (d.highlighted || d.hover ? crewColor(d.name) : '#000000'))
-      .style('stroke-width', d => (d.highlighted || d.hover ? '3px' : '2px'));
+      .style('stroke-width', d => (d.highlighted || d.hover ? '3px' : '2px'))
+      .style('stroke-opacity', d => selectedCrews.size > 0 ? (d.highlighted || d.hover ? '1' : '0.5') : '1');
 
     crew.classed('highlighted', d => d.highlighted)
       .style('filter', d => (d.highlighted || d.hover ? 'url(#dropShadow)' : ''))
       .style('stroke', d => (d.highlighted || d.hover ? crewColor(d.name) : '#000000'))
       .style('stroke-width', d => (d.highlighted || d.hover ? '3px' : '2px'))
+      .style('stroke-opacity', d => selectedCrews.size > 0 ? (d.highlighted || d.hover ? '1' : '0.5') : '1')
       .transition()
       .duration(transitionLength)
       .attr('transform', `translate(${x(-dayShift)},0)`);