d3:拼合嵌套数据?
问题描述:
如何基于一系列嵌套值使用D3来平整表格?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>
答
必须在渲染数据之前将数据平坦化,以便每行有一个数据(并且因为行不嵌套,所以数据不应嵌套)。这样你显示的表格渲染代码就可以工作。
理想情况下,您已经将数据平面化。 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
}
});
);
}, [])
答
您必须在将数据传递给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
完美的感觉;非常感谢。如果你有第二个,你可以解释'reduce',为什么你可以在'forEach'上使用它? – allanberry
我包含'.reduce()'示例主要是为了幻想:)通过查看使用它的代码很难收集它的工作方式,但是如果阅读[它的工作原理说明],应该变得足够清晰https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)。 – meetamit
在这种情况下,优点是微不足道的,但仍然:减少内部函数不需要引用在这些函数之外定义的变量(第一个示例中为'flatCars.push')。这意味着你可以写'flatCars = cars.reduce(flattenCar)',其中'flattenCar'在别处定义。这可能会提高性能(这里可以忽略不计)。它也实现了1而不是2行的结果,这可以使得代码更具可读性。即开发人员可能会因'var flatCars = []'的作用而感到困惑 - 直到他们读取下一代码块。 – meetamit