title: Append is not a function in d3.js?
body: <p>I am new to D3.js and I have an error I do not understand. In the style section, I have this</p>
  
  <pre><code>.bar1 {
    fill: blue;
  }
  
  .bar2 {
    fill: red;
  }
  </code></pre>
  
  <p>I my html code I define this ID: </p>
  
  <pre><code>&lt;div id="chart-svg"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>In the JavaScript code, svg is defined like so:</p>
  
  <pre><code>var svg = d3.select("#chart-svg").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("class", "graph")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  </code></pre>
  
  <p>then in the javascript I have this definition of some logic to filter code</p>
  
  <pre><code>barsM = svg.selectAll(".bar1").data(data).enter()
       .filter(function (d) {
           return (d.location_id == location_id)
               &amp;&amp; (d.year == year)
               &amp;&amp; (d.metric == metric)
               &amp;&amp; (d.sex_id == 1)
       });
  </code></pre>
  
  <p>And finally</p>
  
  <pre><code>barsM.append("rect")
      .attr("class", "bar1")
      .attr("x", function (d) { return x(d.age_group); })
      .attr("width", x.rangeBand() / 2)
      .attr("y", function (d) { return y0(d.mean * 100); })
      .attr("height", function (d, i, j) { return height - y0(d.mean * 100); });
  </code></pre>
  
  <p>But I have this strange error that says append is not function.  Please help
  <a href="https://i.stack.imgur.com/K6apU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K6apU.png" alt="enter image description here"></a></p>