D3多级嵌套的多线图

Question

我试图创建一个基于以下CSV多线图：

storageSystem,poolId,availableVolumeCapacity,date 
system01,0,18031398,20170413 
system01,1,15626268,20170413 
system01,2,61256286,20170413 
system01,3,119514990,20170413 
system02,0,15046668,20170413 
system02,1,12486558,20170413 
system02,2,12303396,20170413 
system03,0,35171335,20170413 
system03,1,17263722,20170413 
system01,0,18031387,20170414 
system01,1,15626257,20170414 
system01,2,61256275,20170414 
system01,3,119514989,20170414 
system02,0,15046657,20170414 
system02,1,12486547,20170414 
system02,2,12303385,20170414 
system03,0,35171324,20170414 
system03,1,17263711,20170414 

这里的数据是如何连接的关系表：

到目前为止，我已将我的嵌套密钥定义为storageSystem，但我如何将poolId设置为子密钥？我曾尝试加入poolId，但这返回Error: <path> attribute d: Expected number,"MNaN,NaNLNaN,NaN".

var parseDate = d3.time.format("%Y%m%d").parse; 

d3.csv("ssytem.csv", function(error, data) { 
    if (error) { 
     throw error; 
    } else { 
     console.log(data); 
    } 
    data.forEach(function(d) { 
      d.date = parseDate(d.date); 
      d.availableVolumeCapacity = +d.availableVolumeCapacity; 
    }); 

    x.domain(d3.extent(data, function(d) { return d.date; })); 
    y.domain([0, d3.max(data, function(d) { return d.availableVolumeCapacity; })]); 

    var dataNest = d3.nest() 
     .key(function(d) {return d.storageSystem; }) 
     .key(function(d) { return d.poolId; }) 
     .entries(data); 

数据对象：

0: Object 
availableVolumeCapacity: 35171324 
date: Thu Apr 13 2017 00:00:00 GMT+0000 (Coordinated Universal Time) 
poolId: "0" 
storageSystem: "system03" 
1: Object 
availableVolumeCapacity: 17263711 
date: Thu Apr 13 2017 00:00:00 GMT+0000 (Coordinated Universal Time) 
poolId: "1" 
storageSystem: "system03" 

Answer 1

您再添key电话：

var dataNest = d3.nest() 
    .key(function(d) {return d.storageSystem; }) 
    .key(function(d) {return d.poolId; }) 
    .entries(data); 

这是怎么dataNest看起来像：

[ 
    { 
    "key": "system01", 
    "values": [ 
     { 
     "key": "0", 
     "values": [ 
      { 
      "storageSystem": "system01", 
      "poolId": "0", 
      "availableVolumeCapacity": "18031398", 
      "date": "20170413" 
      }, 
      { 
      "storageSystem": "system01", 
      "poolId": "0", 
      "availableVolumeCapacity": "18031387", 
      "date": "20170414" 
      } 
     ] 
     }, 
     { 
     "key": "1", 
     "values": [ 
      { 
      "storageSystem": "system01", 
      "poolId": "1", 
      "availableVolumeCapacity": "15626268", 
      "date": "20170413" 
      }, 
      { 
      "storageSystem": "system01", 
      "poolId": "1", 
      "availableVolumeCapacity": "15626257", 
      "date": "20170414" 
      } 
     ] 
     }, 
     ... and so on 

注意到它有两个层次，从而得到一个实际的数据对象，你将需要访问一个分组结果成员如下：

var s = `storageSystem,poolId,availableVolumeCapacity,date 
 
system01,0,18031398,20170413 
 
system01,1,15626268,20170413 
 
system01,2,61256286,20170413 
 
system01,3,119514990,20170413 
 
system02,0,15046668,20170413 
 
system02,1,12486558,20170413 
 
system02,2,12303396,20170413 
 
system03,0,35171335,20170413 
 
system03,1,17263722,20170413 
 
system01,0,18031387,20170414 
 
system01,1,15626257,20170414 
 
system01,2,61256275,20170414 
 
system01,3,119514989,20170414 
 
system02,0,15046657,20170414 
 
system02,1,12486547,20170414 
 
system02,2,12303385,20170414 
 
system03,0,35171324,20170414 
 
system03,1,17263711,20170414`; 
 

 
const data = d3.csvParse(s); 
 

 
const dataNest = d3.nest().key(d => d.storageSystem).key(d => d.poolId).entries(data); 
 

 
const container = d3.select('#container'); 
 

 
const lists = container.selectAll('ul').data(dataNest); 
 
const listsEnter = lists.enter().append('ul').text(d => d.key) 
 

 
const items = lists.merge(listsEnter).selectAll('li').data(d => d.values); 
 
const itemsEnter = items.enter().append('li').text(d => `Pool: ${d.key}`) 
 

 
items.merge(itemsEnter).selectAll('p').data(d => d.values) 
 
    .enter().append('p').text(d => `Available Capacity: ${d.availableVolumeCapacity}`)

ul { 
 
    font-weight: bold; 
 
} 
 

 
li { 
 
    font-weight: normal; 
 
    margin: 10px 0; 
 
} 
 

 
p { 
 
    font-size: 13px 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.min.js"></script> 
 
<div id="container"></div>