Modify DOM elements.

.idea/workspace.xml

@@ -2,6 +2,7 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="048f5977-9ed4-45df-900a-ad0460ae8f41" name="Default" comment="">
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/workspace.xml" />
       <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>
@@ -27,8 +28,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="406">
-              <caret line="29" column="0" selection-start-line="29" selection-start-column="0" selection-end-line="29" selection-end-column="0" />
+            <state relative-caret-position="210">
+              <caret line="15" column="19" selection-start-line="15" selection-start-column="19" selection-end-line="15" selection-end-column="19" />
               <folding />
             </state>
           </provider>
@@ -37,8 +38,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="350">
-              <caret line="24" column="0" selection-start-line="24" selection-start-column="0" selection-end-line="24" selection-end-column="0" />
+            <state relative-caret-position="420">
+              <caret line="30" column="0" selection-start-line="30" selection-start-column="0" selection-end-line="30" selection-end-column="0" />
               <folding />
             </state>
           </provider>
@@ -262,12 +263,12 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1478355759772</updated>
-      <workItem from="1478355760990" duration="5293000" />
+      <workItem from="1478355760990" duration="6262000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="5293000" />
+    <option name="totallyTimeSpent" value="6262000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="23" width="1032" height="877" extended-state="0" />
@@ -397,16 +398,16 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/index.html">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="406">
-          <caret line="29" column="0" selection-start-line="29" selection-start-column="0" selection-end-line="29" selection-end-column="0" />
+        <state relative-caret-position="210">
+          <caret line="15" column="19" selection-start-line="15" selection-start-column="19" selection-end-line="15" selection-end-column="19" />
           <folding />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/src/app.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="350">
-          <caret line="24" column="0" selection-start-line="24" selection-start-column="0" selection-end-line="24" selection-end-column="0" />
+        <state relative-caret-position="420">
+          <caret line="30" column="0" selection-start-line="30" selection-start-column="0" selection-end-line="30" selection-end-column="0" />
           <folding />
         </state>
       </provider>

index.html

@@ -12,6 +12,9 @@
       a {
         display: block;
       }
+      .red {
+        color: red;
+      }
     </style>
   </head>
 

src/app.js

@@ -1,24 +1,30 @@
-const div = d3.select('div');
-console.log(div.nodes());
-
-const link = d3.select('a');
-console.log(link.nodes()); // The first, in div.title
+const secondLink = d3.selectAll('a:nth-child(2)');
 
-const links = d3.selectAll('a');
-console.log(links.nodes()); // All 4
+console.log(secondLink.attr('href'));
+// 1 arg: getter, 2 args: setter
+secondLink.attr('href', 'http://google.com');
+console.log(secondLink.attr('href'));
 
-let divLinks = div.selectAll('a');
-console.log(divLinks.nodes()); // The three links in div.title
+d3.selectAll('a:nth-child(2)')
+  // 1 arg: getter, 2 args: setter
+  .style('color', 'green');
 
-divLinks = d3.selectAll('div a');
-console.log(divLinks.nodes()); // The three links in div.title
+const thirdLink = d3.selectAll('a:nth-child(3)')
+  // attr(elem, val) returns the selection on which it has been called
+  .attr('href', 'http://bing.com')
+  // Usually, use CSS rather than inline styles.
+  // 1 arg: getter, 2 args: setter
+  .style('color', 'orange');
+console.log(thirdLink.attr('href'));
 
-const actionLink = d3.select('.action');
-console.log(actionLink.nodes()); // The last link.
+const firstChild = d3.selectAll('a:nth-child(1)')
+  // Can't use "class" as it's a JS keyword.
+  .classed('red', true);
+console.log(firstChild.attr('class'));
 
-const secondLink = d3.selectAll('a:nth-child(2)');
-console.log(secondLink.nodes()); // The 2nd link in div.title: "products"
+// 0 arg: getter, 1 args: setter
+d3.select('a.action')
+  .text('Inventory');
 
-// Can use an object instead of a CSS selector.
-var allLinks = d3.selectAll(document.links);
-console.log(allLinks.size(), allLinks.nodes());
+d3.select('a')
+  .html('About <b>SALE</b>')