D3 Multi-level Nesting For Multi-line Chart

I'm trying to create a multi-line chart based on the below csv: storageSystem,poolId,availableVolumeCapacity,date system01,0,18031398,20170413 system01,1,15626268,20170413 system01

Solution 1:

You add another key call:

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

This is how dataNest will look like:

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

Notice it has two levels so to get to an actual data object you'll need to access a grouping result member like this:

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: 10px0;
}

p {
  font-size: 13px
}

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