Do a non-CSS-doable hover: modify the non-hovered elements.

.idea/workspace.xml

@@ -27,8 +27,8 @@
       <file leaf-file-name="index.html" pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/index.html">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="294">
-              <caret line="21" column="24" selection-start-line="21" selection-start-column="24" selection-end-line="21" selection-end-column="24" />
+            <state relative-caret-position="280">
+              <caret line="20" column="0" selection-start-line="20" selection-start-column="0" selection-end-line="20" selection-end-column="0" />
               <folding />
             </state>
           </provider>
@@ -37,8 +37,8 @@
       <file leaf-file-name="app.js" pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/src/app.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="462">
-              <caret line="33" column="6" selection-start-line="33" selection-start-column="6" selection-end-line="33" selection-end-column="6" />
+            <state relative-caret-position="434">
+              <caret line="31" column="46" selection-start-line="31" selection-start-column="46" selection-end-line="31" selection-end-column="46" />
               <folding />
             </state>
           </provider>
@@ -158,12 +158,12 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1478355759772</updated>
-      <workItem from="1478355760990" duration="12293000" />
+      <workItem from="1478355760990" duration="12831000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="2827000" />
+    <option name="totallyTimeSpent" value="3365000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="23" width="899" height="877" extended-state="0" />
@@ -293,16 +293,16 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/index.html">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="294">
-          <caret line="21" column="24" selection-start-line="21" selection-start-column="24" selection-end-line="21" selection-end-column="24" />
+        <state relative-caret-position="280">
+          <caret line="20" column="0" selection-start-line="20" selection-start-column="0" selection-end-line="20" selection-end-column="0" />
           <folding />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/src/app.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="462">
-          <caret line="33" column="6" selection-start-line="33" selection-start-column="6" selection-end-line="33" selection-end-column="6" />
+        <state relative-caret-position="434">
+          <caret line="31" column="46" selection-start-line="31" selection-start-column="46" selection-end-line="31" selection-end-column="46" />
           <folding />
         </state>
       </provider>

index.html

@@ -18,9 +18,6 @@
         stroke: black;
         stroke-width: 1;
       }
-      .barOn {
-        fill: lightblue;
-      }
     </style>
   </head>
 

src/app.js

@@ -29,13 +29,18 @@ bar.append('rect')
 
   // Contrived example: '.bar:hover' in CSS would have been sufficient.
   // A fat arrow function would have a lexical this instead of the proper one.
-  .on('mouseover', function () {
-    // Here, 'this' is the raw DOM element.
-    //console.log(d3.select(this), d, i);
-    d3.select(this).classed('barOn', true);
+  .on('mouseover', function (d, i, elements) {
+    d3.select(this)
+      .style('transform', 'scaleX(2)');
+    // Like 'this', 'elements' are plain DOM elements.
+    d3.selectAll(elements)
+      .filter(':not(:hover)')
+      .style('fill-opacity', 0.2);
   })
-  .on('mouseout', function () {
-    d3.select(this).classed('barOn', false);
+  .on('mouseout', function (d, i, elements) {
+    d3.selectAll(elements)
+      .style('fill-opacity', 1)
+      .style('transform', 'scaleX(1)');
   })
 
   .on('click', (who) => console.log(`hi ${who.name}`));