d3 for循环从对象列表中检索数据

时间:2013-12-23 08:00:01

标签: javascript d3.js

我有一个加载到屏幕的csv文件。 csv文件具有以下属性

DATE              MESSAGEID  Status  Source  ParentID  childID
12/21/2013 23:12  123        SEND    A              2
12/21/2013 23:12  456        RECEIVE B              3
12/21/2013 23:12  789        SEND    B              2         4

现在在控制台我写了这个

var csvdataset;
d3.csv("newFile.csv",function(d,i){csvdataset=i;console.log(csvdataset)});

所以它给了我

[Object, Object, Object]

现在,如果我想要检索消息ID或任何值,我该如何获取它们? 我知道我是否给予

d3.csv("newFile.csv",function(d,i){csvdataset=i;console.log(csvdataset[3])});

我将获得第三行,但我需要一些将执行以从对象中检索特定值的循环。

我尝试了下面的事情

d3.csv("newFile.csv", function (d, i) {
    csvdataset = i;
}, csvdataset.forEach(csvdataset) {
    alert(csvdataset.SOURCE[csvdataset]);
}
});

d3.csv("newFile.csv", function (d, i) {
    csvdataset = i;
    console.log(i.SOURCESERVICE[i])
});

但没有任何效果。

我有另一个问题。我正在树结构中生成一个json,如下所示

[{"Name":"s1","Node ID":"649","DataObject":{"nodeID":"649","nodeName":"s1","timeTaken":"00:06:30","startTime":"2013-12-10 18:06:02"},"Children":[[{"Name":"c1","Node ID":"286","DataObject":{"nodeID":"286","nodeName":"c1","timeTaken":"00:06:27","startTime":"2013-12-10 18:06:04+05:30"},"Children":[[{"Name":"c2","Node ID":"287","DataObject":{"nodeID":"287","nodeName":"c2","timeTaken":"00:00:02","startTime":"2013-12-10 18:06:06+05:30"}},{"Name":"c3","Node ID":"1080","DataObject":{"nodeID":"1080","nodeName":"c3","timeTaken":"00:06:17","startTime":"2013-12-10 18:06:12+05:30"},"Children":[[{"Name":"c4","Node ID":"b2861a2f-75a9-4f95-abcd-1dae54e713bc","DataObject":{"nodeID":"b2861a2f-75a9-4f95-abcd-1dae54e713bc","nodeName":"c4","timeTaken":"00:05:08","startTime":"2013-12-10 18:07:19+05:30"}}]]}]]}]]}]

现在我想在d3中创建一棵树。但我无法找回孩子们

    var tree = d3.layout.tree()
   .size([height, width])
     .children(function(d)
        {
            return (!d.Children || d.Children.length === 0) ? null : d.Children;
        });
   d3.xhr("DataMapper?function-name=Tree","application/json", function(error, flare) {
   root = JSON.parse(flare.response);
   root.x0 = height / 2;
   root.y0 = 0;
   console.log(root);
   function collapse(d) {
        if (d.Children) {
          d.Children= d.Children;
          d.Children.forEach(collapse);
          d.Children= null;
           console.log("children "+d.Children);

        }
      }
 });

如果我给var nodes = tree.nodes(root);我在节点变量中得到一个节点数组,但是如果我给var links=tree.links(nodes);我无法获得链接。任何人都可以解释一下。我已经提供了上面的json

2 个答案:

答案 0 :(得分:2)

D3设计用于专注于数据而不是循环的功能。

var data = [];
d3.csv("newFile.csv", function(csvData){
    data = csvData;
    // Call a function now you have the data ready 
    doSomething(data);
})

function doSomething(d){
d3.select('#target')
    .selectAll('div')
    .data(d)
    .enter()
        .append('div')
        .text(function(d, i){return d.MESSAGEID + ' ' + d.Status;})
 }

如需进一步阅读,请查看

var data = [];
d3.csv("newFile.csv", function(csvData){
    // Just  array of data which has been parsed from the file
    data = csvData;
    console.log({'02: data just Parsed':data});

    // Say you want to group by Status(could be d.MESSAGEID, d.Source etc)
    data = d3.nest()
        .key(function(d){return d.Status;})
        .map(csvData);
    // Now returns an object with 'RECEIVE':Array[1] & 'SEND':Array[2]
    console.log({'03: Nested by Status':data});

    // Call a function now you have the data ready 
    // doSomething(data);
})


// This returns Array[0] as d3.csv does not block 
console.log({'01: Outside callback': data});

答案 1 :(得分:0)

您可以尝试循环第二个参数中定义的d3.csv函数。

因此,您可以执行以下操作:

d3.csv("newFile.csv",function(d) {
    d.forEach(function(entry){ alert(entry.name)});
})