title: D3JS making a bar chart where each row/data point contains multiple time segments
body: <p>I'm trying to make a chart of sleeping sessions that looks something like this:
  <a href="https://i.stack.imgur.com/Wsnha.png" rel="nofollow noreferrer">https://i.stack.imgur.com/Wsnha.png</a></p>
  <p>I currently have only been able to get it to draw one rectangle per data point. I'm wondering what the syntax would be to have it draw multiple rectangles associated with a single row/data point since each data point contains an array of sleeping sessions from that day.</p>
  <p>Here is what my code currently looks like:</p>
  <pre><code>var start;
  var end;
  var rectGrp = svg
      .append(&quot;g&quot;)
      .attr('transform', 'translate(' +padding.left+','+padding.top+')')
      .selectAll(&quot;rect&quot;)
      .data(sleepArr)
      .enter()
      //I want to create one of these rectangles for all the sleeping sessions in that day
      .append(&quot;rect&quot;)
          .attr(&quot;x&quot;, (d) =&gt; {
              start = d.sessions[0].startTime;
              end = d.sessions[0].endTime;
              return xScale(start); 
          })
          .attr(&quot;width&quot;, (d) =&gt; {
              start = d.sessions[0].startTime;
              end = d.sessions[0].endTime;
              var width = end-start;
              return xScale(width);
          })
          .attr(&quot;y&quot;, (d) =&gt; yScale(d.date))
          .attr(&quot;height&quot;, yScale.bandwidth())
          .attr(&quot;fill&quot;, (d) =&gt; colors[getDayOfWeek(d.date)])
          .append(&quot;title&quot;)
          .text((d) =&gt; d.date);
  </code></pre>
  <p>I realize that I probably don't have a good understanding of how to use D3 yet and any help would be greatly appreciated.</p>