Question

我正在使用D3 v4开发泳道图。该图是一个计划辅助工具，描述了随着时间的推移执行的任务。任务在Y轴上，时间在X轴上。

以下是一些有助于理解我的问题的示例数据：

任务

[
    {
        "id": "2a606884-d6b9-4ad1-a5ff-5c816c43fef6",
        "description": "Task 01",
        "start": "2017-11-07T02:00:00.000Z",
        "finish": "2017-11-07T08:00:00.000Z",
        "label": "Task 01",
        "taskTypeId": "0b936e39-49b9-4cc8-b5c5-b1f1338e9faf",
        "taskTypeDescription": "Walk the dog"
    },
    {
        "id": "6713025e-63e2-4ff3-8202-43e17c13431d",
        "description": "Task 02",
        "start": "2017-11-07T08:00:00.000Z",
        "finish": "2017-11-07T12:00:00.000Z",
        "label": "Task 02 02",
        "taskTypeId": "9af060ba-5abf-4627-8462-7c21281ab487",
        "taskTypeDescription": "Wash the car"
    },
    {
        "id": "ff071aa5-e14b-4b32-bd51-7cf079f4c876",
        "description": "Task 03",
        "start": "2017-11-07T12:00:00.000Z",
        "finish": "2017-11-07T14:00:00.000Z",
        "label": "Task 03",
        "taskTypeId": "8e6a8b11-0e23-4473-8795-ac74fc1efe07",
        "taskTypeDescription": "Make the beds"
    },
    {
        "id": "a84219e2-5da9-4119-915b-d84f35fda9d0",
        "description": "Task 04",
        "start": "2017-11-07T12:00:00.000Z",
        "finish": "2017-11-07T14:00:00.000Z",
        "label": "Task 04",
        "taskTypeId": "a065dfe2-2c68-4467-84a5-1fce7c34513b",
        "taskTypeDescription": "Wash up dishes"
    }
]

按区域嵌套的新TaskTypes数组：

[
    {
        "key": "Outdoor",
        "values": [
            {
                "id": "a97ad203-37e4-4fb8-8168-c3fdc1980d3d",
                "description": "Walk the dog",
                "areaId": "19952c5a-b762-4937-a613-6151c8cd9332",
                "areaDescription": "Outdoor"
            },
            {
                "id": "0b936e39-49b9-4cc8-b5c5-b1f1338e9faf",
                "description": "Wash the car",
                "areaId": "19952c5a-b762-4937-a613-6151c8cd9332",
                "areaDescription": "Outdoor"
            }
        ]
    },
    {
        "key": "Indoor",
        "values": [
            {
                "id": "8632bd18-8968-4185-95f0-f093f7fc9a02",
                "description": "Make the beds",
                "areaId": "87d8f755-ef60-4cfa-9a4a-c94cff9f8a22",
                "areaDescription": "Indoor"
            },
            {
                "id": "8e6a8b11-0e23-4473-8795-ac74fc1efe07",
                "description": "Wash the dishes",
                "areaId": "87d8f755-ef60-4cfa-9a4a-c94cff9f8a22",
                "areaDescription": "Indoor"
            }
        ]
    }
]

到目前为止，我的图表使用一个简单的TaskTypes 1维数组列出了Y轴上的所有TaskTypes。然后根据任务的开始/结束，沿X轴将每个任务定位在任务的任务类型的行内。一切都好。

我的yScale目前是这样的：

this.yScale = d3
            .scaleBand()
            .domain(this.taskTypeDescriptions)
            .rangeRound([0, this.chartHeight])
            .padding(padding);

...其中this.taskTypeDescriptions是TaskTypes的简单1维数组。

现在我按区域分组了TaskTypes。在上面的示例数据中，有2个区域：室外和室内。我想通过它们的父区域在视觉上对TaskType的行进行分组。

这看起来像一个分组的条形图，除了我看到的所有这些例子都为每个主要数据组重复了相同的第二层数据。在我的场景中，我有许多离散的TaskTypes，没有重复，但我仍然希望它们按区域分组。这有可能吗？

非常欢迎任何建议或想法。感谢。

D3 - Swimlane数据的组行

0 个答案: