如何使用d3的JSON数组 [英] How to user JSON arrays with d3

问题描述

我是d3和json的新用户。我试图构造一个水平的甘特图。早些时候我已经使用内存数组，我存储在var数据集相同。但现在我用json对象数组替换了数组。

I am new with d3 and json. I am trying to construct a horizontal gantt chart. Earlier I have acieved the same using inline arrays which i stored in var dataset. But now I have replaced the arrays with json object array .

[   {
        "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部分是：

The d3 part of the code to draw the rectangle is this :

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. 我想在活动内访问开始日期，但代码行（标记为LINE 1和LINE 2 ）我写了它只给出了每个活动的第一次开始的2个矩形。 WHY？

1. I want to access START date inside activities but with the code lines (marked LINE 1 and LINE 2) I have written it is giving only 2 rectangles for first start of each activity . WHY?

在 LINE 1 中，我可以使用dataset.actitvies而不仅仅是数据集吗？我尝试使用它，给我这个错误：

In LINE 1 can I use dataset.actitvies instead of just dataset? I tried using that , gave me this error :

未捕获的TypeError： '0'未定义

Uncaught TypeError: Cannot read property '0' of undefined

推荐答案

1. Because the length of dataset is 2, so when you join it with your rects you're only going to get 2 rects.

您可以使用dataset.activities，但是数据集的长度为2，所以当您将它与您的rect连接时，您可以将LINE 2更改为

You can use dataset.activities, but you would change LINE 2 to

.attr（x，function（d）{return x（d.start）}）

.attr("x", function(d) {return x(d.start)})

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

because you've changed the join so that d now refers to the activities. However, if you do that, you're just going to get three rectangles -- the activities for one of your projects.

如果你要使用嵌套数据，您或者需要使用嵌套选择，或者您需要首先将所有活动添加到一个简单的数组中来平整数据。

If you're going to use nested data, you either need to use a nested selection or you need to flatten the data first by adding all activities to a simple array.

var data = [];

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

嵌套选择将如下所示：

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); })

编辑：这里有一个 jsfiddle

这篇关于如何使用d3的JSON数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！