如何向用戶提供JSON數組d3

我是新的d3和json。我正在嘗試構建一個水平甘特圖。早些時候，我使用存儲在var數據集中的內聯數組來獲得相同的結果。但是現在我已經用json對象數組替換了數組。如何向用戶提供JSON數組d3

[ { 
     "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");

我有以下問題：

我想訪問START內活動日期，但與代碼行（標記爲LINE 1和LINE 2）我已經寫過，每次活動的第一次開始只給出2個矩形。爲什麼？
LINE 1我可以使用dataset.actitvies而不是數據集嗎？我試圖用，給了我這個錯誤：

Uncaught TypeError: Cannot read property '0' of undefined

來源

2013-02-19 Adithya

由於數據集的長度是2，所以當你與你的rects加入它你只拿到2個rects。
您可以使用dataset.activities，但你會改變線路2

.attr（「X」功能（d）{返回X（d.start）}）

，因爲您已更改連接，因此d現在指的是活動。但是，如果你這樣做，你只會得到三個矩形 - 你的一個項目的活動。

如果要使用嵌套數據，您需要使用嵌套選擇，或者需要先將所有活動添加到簡單數組中，然後平鋪數據。

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

來源

2013-02-20 02:26:08

非常感謝它幫助：d – Adithya 2013-02-20 05:26:33

只有一個問題。你寫這個.data（函數（d）{return d.activities;}）的地方我寫了.data（d.activities），但它回饋未識別的對象爲什麼？ – Adithya 2013-02-20 05:33:42

好聽！請接受答案，讓它顯示爲已回答。 http://bost.ocks.org/mike/nest/會給你一個關於嵌套選擇的概述。基本上，您將組加入數據集，然後爲這些矩陣定義一個訪問器函數。 – 2013-02-20 20:52:24

如何向用戶提供JSON數組d3

回答

相關問題