在嵌套 JSON 上使用 dc.js 创建条形图

Question

我正在尝试使用 dc.js 和交叉过滤器按角色计数为角色创建条形图。需要处理嵌套JSON.

样本数据集

 [      {  "user":"Mani"
            "age":55,
            "area":"NORTH",
            "role": [
                {
                    "roleId": 15,
                    "role": "Operator",
                    "at": "2018-10-30T07:53:10.433Z",
                    "createdAt": "2018-10-30T07:53:10.449Z"

                },
                {
                    "statusId": 16,
                    "status": "Supervisor",
                    "at": "2018-10-30T07:53:18.359Z",
                    "createdAt": "2018-10-30T07:53:18.359Z"

                },
                {
                    "statusId": 26,
                    "status": "Manager",
                    "at": "2018-10-30T13:01:50.296Z",
                    "createdAt": "2018-10-30T13:01:50.296Z"

                }
                ]
        },  {
            "user":"Kandan"
            "age":65,
             "area":"SOUTH",
            "role": [
                {
                    "roleId": 15,
                    "role": "Operator",
                    "at": "2018-10-30T07:53:10.433Z",
                    "createdAt": "2018-10-30T07:53:10.449Z"

                },
                {
                    "statusId": 16,
                    "status": "Supervisor",
                    "at": "2018-10-30T07:53:18.359Z",
                    "createdAt": "2018-10-30T07:53:18.359Z"

                }
                ]
        }
]

我尝试使用每个用户的根级别的值创建图表，但是当我尝试访问 role 键时，我以某种方式只能使用一个角色而不是所有角色 returns数组到维度。基本思想是在 x 轴下设置 role.role，在 y 轴上设置它们的数量。我该如何实现？

示例输出

Answer 1

你的问题不是真正的嵌套JSON；事实上，您对每个用户都有多个角色。

要获取每个用户的角色，您可以使用 returns 角色名称数组的访问器：

var roleDimension = cf.dimension(d => d.role.map(r => r.role), true);

第二个参数指定你想要一个"tag" or "array" dimension。这是一种特殊模式，其中每一行将被计算多次，对于维度键访问器 returns 的数组中的每个标记一次。

我知道您想将其用于条形图，这很好 - don't use this for any chart which implicitly adds up to 100%! 由于类别不是相互排斥的，因此即使您注意不要暗示 100%，行为也可能会造成混淆。

在嵌套 JSON 上使用 dc.js 创建条形图

Using dc.js on nested JSON to create bar chart

javascript

d3.js

crossfilter

dc.js