d3：拼合嵌套数据？

Question

如何基于一系列嵌套值使用D3来平整表格？

对于以下cars.json，我希望使用D3来扁平化层次结构，为每个model的每个型号year提供一个新行。因此，总共应该有9个订单项，每个品牌和型号都有3个订单项。

我确定我正在接近这个错误，但我在D3有点新，我不知道该怎么想。我已经使用d3.nest看过其他问题，但由于我没有尝试对任何内容进行分组，因此似乎不适用。谢谢！

cars.json

[ 
    { 
    "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 
     } 
    ] 
    } 
] 

期望的输出

<table> 
    <thead> 
     <tr><th>Make</th><th>Model</th><th>Year</th><th>Price</th></tr> 
    </thead> 
    <tbody> 
     <tr><td>Ford</td><td>Escape</td><td>2013</td><td>16525</td></tr> 
     <tr><td>Ford</td><td>Escape</td><td>2014</td><td></td></tr> 
     <tr><td>Ford</td><td>Escape</td><td>2015</td><td></td></tr> 
     <tr><td>Kia</td><td>Sportage</td><td>2012</td><td></td></tr> 
     <tr><td>Kia</td><td>Sportage</td><td>2013</td><td>16225</td></tr> 
     <tr><td>Kia</td><td>Sportage</td><td>2014</td><td></td></tr> 
     <tr><td>Honda</td><td>CR-V</td><td>2008</td><td></td></tr> 
     <tr><td>Honda</td><td>CR-V</td><td>2009</td><td></td></tr> 
     <tr><td>Honda</td><td>CR-V</td><td>2010</td><td>12875</td></tr> 
    </tbody> 
</table> 

当前的尝试

<table id="cars_table"> 
    <thead> 
     <th>Make</th><th>Model</th><th>Year</th><th>Price</th> 
    </thead> 
    <tbody></tbody> 
    <tfoot></tfoot> 
</table> 

<script> 
(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? 
     }) 
    }) 
})() 
</script> 

Answer 1

必须在渲染数据之前将数据平坦化，以便每行有一个数据（并且因为行不嵌套，所以数据不应嵌套）。这样你显示的表格渲染代码就可以工作。

理想情况下，您已经将数据平面化。 CSV非常适合传输平面数据，这通常是关系数据库的结果。在你的情况下，列将是“制造”，“型号”，“年份”和“价格”，其中每个品牌/型号出现3次 - 每年一次。

如果你不能修改数据，那么一旦它加载，就把它压扁成JS。我几乎肯定没有这一个D3实用程序（d3.nest()做你问做什么的对面），但它足够简单用一个循环做到这一点：

var flatCars = [] 
cars.forEach(function(car) { 
    car.years.forEach(function(carYear) { 
    flatCars.push({ 
     make: car.make, 
     model: car.model, 
     year: carYear.year, 
     price: carYear.price 
    }); 
    }); 
}); 

或

var flatCars = cars.reduce(memo, car) { 
    return memo.concat(
    car.years.map(function(carYear) { 
     return { 
     make: car.make, 
     model: car.model, 
     year: carYear.year, 
     price: carYear.price 
     } 
    }); 
); 
}, []) 

Answer 2

您必须在将数据传递给D3的data()方法之前将其平坦化。 D3应该只负责将数据结构转换为DOM树。换句话说：如果您希望嵌套DOM结构，请使用嵌套数据结构。

所以，压平像这样的数据（使用lodash这里）：

data = _.flatten(data.map(function (model) { 
    return model.years.map(function (year) { 
     return _.assign(year, _.pick(model, 'make', 'model')); 
    }); 
})); 

，然后将其传递给data()方法。在这里工作代码：http://codepen.io/anon/pen/grPzPJ?editors=1111