如何使用d3使用JSON数组

我是d3和json的新手。我正在尝试构建一个水平甘特图。早些时候，我使用存储在var数据集中的内联数组实现了同样的功能。但是现在我用json对象数组替换了数组

[   {
        "process" :"process-name 1",
        "stage" : "stage name 1",
        "activities": [
            {
            "activity_name": "waiting",
            "start": new Date('2012-12-10T06:45+05:30'),
            "end": new Date('2012-10-10T08:45+05:30'),
            },
            {
            "activity_name": "processing",
            "start": new Date('2012-10-11T05:45+05:30'),
            "end": new Date('2012-10-11T06:45+05:30'),
            },
            {
            "activity_name": "pending",
            "start": new Date('2012-10-12T11:45+05:30'),
            "end": new Date('2012-10-13T12:45+05:30'),
            }
            ]

    },
    {
        "process" :"process-name 2",
        "stage" : "stage name 2",
        "activities": [
            {
            "activity_name": "waiting",
            "start": new Date('2012-10-22T06:45+05:30'),
            "end": new Date('2012-10-23T08:45+05:30'),
            },
            {
            "activity_name": "processing",
            "start": new Date('2012-10-25T05:45+05:30'),
            "end": new Date('2012-10-25T06:45+05:30'),
            },
            {
            "activity_name": "pending",
            "start": new Date('2012-10-27T11:45+05:30'),
            "end": new Date('2012-10-27T12:45+05:30'),
            }
            ]
    }       

    ];

绘制矩形的代码的d3部分如下所示：

console.log(dataset);

var height = 600;
var width = 500;
var x = d3.time.scale().domain([new Date(2011, 0, 1,23,33,00), new Date(2013, 0, 1, 23, 59)]).range([0, width]);



var svg = d3.selectAll("body")
.append("svg")
.attr("width",width)
.attr("height",height)
.attr("shape-rendering","crispEdges");


temp = svg.selectAll("body")
.data(dataset) // LINE 1 
.enter()


temp.append("rect")
.attr("width", 4)
.attr("height",12)
.attr("x", function(d) {return x(d.activities[0].start)}) // LINE 2
.attr("y",function(d,i){return i*10;})
.attr("fill","steelblue");

我有以下问题：

我想访问活动中的开始日期，但我写的代码行（标记为第1行和第2行）只给出了每个活动第一次开始的两个矩形。为什么?

在第1行中我可以使用dataset.actitvies而不仅仅是dataset吗？我试着用它，给了我这个错误：

未捕获的TypeError:无法读取未定义的属性“0”

因为数据集的长度是2，所以当你把它和你的矩形连接起来时，你只会得到2个矩形

您可以使用dataset.activities，但可以将第2行更改为

.attr（“x”，函数（d）{return x（d.start）}）

因为您已经更改了联接，所以d现在指的是活动。然而，如果你这样做，你只会得到三个矩形——你的一个项目的活动

如果要使用嵌套数据，则需要使用嵌套选择，或者需要首先通过将所有活动添加到简单数组来展平数据

var data = [];

for (var i = 0, len = dataset.length; i < len; i++) {
    data = data.concat(dataset[i].activities);
}

---

编辑：这里只有一个问题。您编写这个.data（函数（d）{return d.activities；}）的地方，我编写了.data（d.activities），但它返回了未识别的对象为什么？很高兴听到这个消息！请接受答案，使其显示为已回答。将为您提供有关嵌套选择的概述。基本上，您将组加入到数据集，然后为rect定义一个访问器函数。

projects = svg.selectAll("g")
    .data(dataset)
  .enter().append("g")
    .attr("transform", function (d, i) { return "translate(0," + (i * 10) + ")"; }),

rects = projects.selectAll("rect")
    .data(function (d) { return d.activities; })
  .enter().append("rect")
    .attr("height", 12)
    .attr("width", 4)
    .attr("x", function (d) { return x(d.start); })