D3多折线图的多层嵌套 [英] D3 Multi-Level Nesting for Multi-Line Chart

问题描述

我正在尝试根据以下csv创建多折线图:

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,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

这是数据连接方式的关系表:

Here is the relationship table of how the data is connected:

到目前为止，我已将嵌套键定义为storageSystem，但是如何将poolId设置为子键?我尝试添加poolId，但这会返回Error: <path> attribute d: Expected number,"MNaN,NaNLNaN,NaN".

So far I have defined my nested key as storageSystem, but how would I set poolId as the subkey? I have tried adding poolId, but this returns 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"

推荐答案

您添加另一个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

请注意，它具有两个级别，因此要访问实际的数据对象，您将需要访问分组结果成员，如下所示:

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: 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>

这篇关于D3多折线图的多层嵌套的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！