title: d3 - when setAttribute() works but .attr doesn't?
body: <p>I'm puzzled as to why the d3 method for setting an element attribute fails (in this piece of code) while the traditional JS method works. (I'm trying to update the chloropleth colours as the user clicks a HTML button to change the data being plotted, all from the same JSON.)</p>
  
  <p>The HTML is simple:</p>
  
  <pre><code>&lt;div id="buttons"&gt;
      &lt;button id="party"&gt;Parties&lt;/button&gt;
      &lt;button id="tenure"&gt;Tenure&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's the relevant JS with the two lines side-by-side. When I run it as is in Chrome, I get "Object # has no method 'attr'":</p>
  
  <pre><code>var paths = svg.selectAll("path");
  
  var plot = {
      "mode": "party",
      "redraw": function()    {
          var e = e || window.event;
          var targ = e.target || e.srcElement;
          if (targ.nodeType == 3) targ = targ.parentNode;
  
          switch (targ.id)    {
          case "party":
              // some code in here
              break;
          case "tenure":
              paths.each(function(d,i) {
                  this.setAttribute("class","");  // Same question here actually
              if (d.In_Office_Full_Date) {
  </code></pre>
  
  <p>// This line errors:</p>
  
  <pre><code>this.attr("style", "fill: " + t_scale(getJSDateFromExcel(d.In_Office_Full_Date).getFullYear()));
  </code></pre>
  
  <p>// ... but this line works:</p>
  
  <pre><code>this.setAttribute("style", "fill: " + t_scale(getJSDateFromExcel(d.In_Office_Full_Date).getFullYear()));
  
              }
              else
                  this.setAttribute("style", "fill: #111");   // Neutral colour
              });
              break;
          default:
              console.log("Unknown event trigger in redraw()");
          }
      }
  }
  
  var t_scale = d3.scale.linear()
    .domain([1973,2013])
    .range(['red','white']);
  
  
  d3.select("body").selectAll("#buttons button")
          .on("click",plot.redraw);
  </code></pre>
  
  <p>I hope you can help!</p>