title: d3.js Unexpected Behavior creating and entering Elements
body: <p>I am trying to plot a very basic graph here. What I want to achieve is a little bit like this: <a href="https://i.stack.imgur.com/7VbxK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7VbxK.png" alt="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Michelsonmorley-boxplot.svg/2000px-Michelsonmorley-boxplot.svg.png"></a></p>
  
  <p>Every "Sub-Graph" contains of 4 data points.</p>
  
  <p>The desired Structure is:</p>
  
  <pre><code> .chart
    .chart__graph
      .chart__graph__exp1
      .chart__graph__exp2
      .chart__graph__opt
      .chart__graph__min
    .chart__graph
      .chart__graph__exp1
      .chart__graph__exp2
      .chart__graph__opt
      .chart__graph__min
    .chart__graph
      ....
  </code></pre>
  
  <p>This is my approach:</p>
  
  <pre><code>    var data = [
          {
              minimum: 4,
              optimum: 7,
              company: 6,
              competitor: 6
          },
          {
              minimum: 2,
              optimum: 4,
              company: 4,
              competitor:3
          },
          {
              minimum: 3,
              optimum: 7,
              company: 6,
              competitor: 3
          }
      ]
  
      d3.select(".chart").selectAll(".chart__graph")
          .data(data)
          .enter()
          .append("div").attr("class", "chart__graph__min").html(function(d) { return d.minimum; });
      d3.select(".chart").selectAll(".chart__graph")
          .data(data)
          .enter()
          .append("div").attr("class", "chart__graph__exp1").html(function(d) { return d.company; })
      d3.select(".chart").selectAll(".chart__graph")
          .data(data)
          .enter()
          .append("div").attr("class", "chart__graph__exp2").html(function(d) { return d.competitor; })
      d3.select(".chart").selectAll(".chart__graph")
          .data(data)
          .enter()
          .append("div").attr("class", "chart__graph__opt").html(function(d) { return d.optimum; })
  </code></pre>
  
  <p>According to the documentation/tutorials I expect it to create a subdiv, but it seems to ignore .selectAll(".chart__graph") completely. 
  If I <code>.append()</code> the div manually, then It creates the subdiv for every run-through which is not desired. 
  What am I missing to achieve my desired div-structure?
  Also, what does <code>selectAll()</code> actually do?</p>
  
  <p>Please don't mind the repetitive code, trying to wrap my head around the D3.js syntax for now.</p>