title: d3: flatten nested data?
body: <p>How do I flatten a table based on a series of nested values, using D3?</p>
  
  <p>For the following <code>cars.json</code>, I wish to use D3 to flatten the hierarchy, providing a new row for each model <code>year</code> of each <code>model</code>.  So there should be a total of nine line items, three for each make and model.</p>
  
  <p>I'm sure I'm approaching this wrong, but I'm a bit new at D3, and I don't know how to think about it.  I've seen other questions using <code>d3.nest</code>, but as I'm not trying to group anything, it doesn't seem applicable.  Thanks!</p>
  
  <p><strong><code>cars.json</code></strong></p>
  
  <pre><code>[
    {
      "make": "Ford",
      "model": "Escape",
      "years": [
        {
          "year": 2013,
          "price": 16525
        },
        {
          "year": 2014
        },
        {
          "year": 2015
        }
      ]
    },
    {
      "make": "Kia",
      "model": "Sportage",
      "years": [
        {
          "year": 2012
        },
        {
          "year": 2013,
          "price": 16225
        },
        {
          "year": 2014
        }
      ]
    },
    {
      "make": "Honda",
      "model": "CR-V",
      "years": [
        {
          "year": 2008
        },
        {
          "year": 2009
        },
        {
          "year": 2010,
          "price": 12875
        }
      ]
    }
  ]
  </code></pre>
  
  <p><strong>desired output</strong></p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;&lt;th&gt;Make&lt;/th&gt;&lt;th&gt;Model&lt;/th&gt;&lt;th&gt;Year&lt;/th&gt;&lt;th&gt;Price&lt;/th&gt;&lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;&lt;td&gt;Ford&lt;/td&gt;&lt;td&gt;Escape&lt;/td&gt;&lt;td&gt;2013&lt;/td&gt;&lt;td&gt;16525&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Ford&lt;/td&gt;&lt;td&gt;Escape&lt;/td&gt;&lt;td&gt;2014&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Ford&lt;/td&gt;&lt;td&gt;Escape&lt;/td&gt;&lt;td&gt;2015&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Kia&lt;/td&gt;&lt;td&gt;Sportage&lt;/td&gt;&lt;td&gt;2012&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Kia&lt;/td&gt;&lt;td&gt;Sportage&lt;/td&gt;&lt;td&gt;2013&lt;/td&gt;&lt;td&gt;16225&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Kia&lt;/td&gt;&lt;td&gt;Sportage&lt;/td&gt;&lt;td&gt;2014&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Honda&lt;/td&gt;&lt;td&gt;CR-V&lt;/td&gt;&lt;td&gt;2008&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Honda&lt;/td&gt;&lt;td&gt;CR-V&lt;/td&gt;&lt;td&gt;2009&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Honda&lt;/td&gt;&lt;td&gt;CR-V&lt;/td&gt;&lt;td&gt;2010&lt;/td&gt;&lt;td&gt;12875&lt;/td&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>current attempt</strong></p>
  
  <pre><code>&lt;table id="cars_table"&gt;
      &lt;thead&gt;
          &lt;th&gt;Make&lt;/th&gt;&lt;th&gt;Model&lt;/th&gt;&lt;th&gt;Year&lt;/th&gt;&lt;th&gt;Price&lt;/th&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;&lt;/tbody&gt;
      &lt;tfoot&gt;&lt;/tfoot&gt;
  &lt;/table&gt;
  
  &lt;script&gt;
  (function(){
      d3.json('/static/cars.json', function(error, cars) {
  
          var tbody = d3.select('tbody')
          rows = tbody.selectAll('tr').data(cars).enter().append('tr')
  
          rows.append('td').html(function(d) {
              return d.make
          })
  
          rows.append('td').html(function(d) {
              return d.model
          })
  
          var years = rows.append('td').html(function(d) {
              return d.years
              // don't want this nested; probably should be peeled out into another `selectAll`, but I don't know where?
          })
      })
  })()
  &lt;/script&gt;
  </code></pre>