Refactor inline selection actions with selection.call().

.idea/workspace.xml

@@ -2,7 +2,6 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="048f5977-9ed4-45df-900a-ad0460ae8f41" name="Default" comment="">
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/index.html" afterPath="$PROJECT_DIR$/index.html" />
       <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app.js" afterPath="$PROJECT_DIR$/src/app.js" />
     </list>
     <ignored path="v4-tutorial.iws" />
@@ -37,8 +36,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="434">
-              <caret line="31" column="46" selection-start-line="31" selection-start-column="46" selection-end-line="31" selection-end-column="46" />
+            <state relative-caret-position="227">
+              <caret line="24" column="17" selection-start-line="24" selection-start-column="17" selection-end-line="24" selection-end-column="17" />
               <folding />
             </state>
           </provider>
@@ -158,12 +157,12 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1478355759772</updated>
-      <workItem from="1478355760990" duration="12831000" />
+      <workItem from="1478355760990" duration="13566000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="3365000" />
+    <option name="totallyTimeSpent" value="4100000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="23" width="899" height="877" extended-state="0" />
@@ -301,8 +300,8 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/src/app.js">
       <provider selected="true" editor-type-id="text-editor">
-        <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" />
+        <state relative-caret-position="227">
+          <caret line="24" column="17" selection-start-line="24" selection-start-column="17" selection-end-line="24" selection-end-column="17" />
           <folding />
         </state>
       </provider>

src/app.js

@@ -6,6 +6,18 @@ const scores = [
   { name: "Emily", score: 88 }
 ];
 
+function scaleBar(selection, scale) {
+  selection.style('transform', `scaleX(${scale})`);
+}
+
+function fade(selection, opacity) {
+  selection.style('fill-opacity', opacity);
+}
+
+function setFill(selection, color) {
+  selection.style('fill', color);
+}
+
 const bar = d3.select(".chart")
   .append('svg')
     .attr('width', 225)
@@ -24,23 +36,24 @@ const bar = d3.select(".chart")
 bar.append('rect')
   .style("width", d => d.score)
   .text(d => d.name)
-  // classed('bar', true) to set, classed('bar', false) to remove.
   .attr("class", "bar")
 
-  // 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 (d, i, elements) {
     d3.select(this)
-      .style('transform', 'scaleX(2)');
-    // Like 'this', 'elements' are plain DOM elements.
+      .call(scaleBar, 1.5)
+      .call(setFill, 'orange');
+
     d3.selectAll(elements)
       .filter(':not(:hover)')
-      .style('fill-opacity', 0.2);
+      .call(fade, 0.2);
   })
   .on('mouseout', function (d, i, elements) {
+    d3.select(this)
+      .call(scaleBar, 1) // call returns the (modified) selection.
+      .call(setFill, 'palegreen'); // ...which allows chaining.
+
     d3.selectAll(elements)
-      .style('fill-opacity', 1)
-      .style('transform', 'scaleX(1)');
+      .call(fade, 1);
   })
 
   .on('click', (who) => console.log(`hi ${who.name}`));