javascript - d3.csv 将列值映射为对象中的键

Question

D3 Drag Drop Example

我正在研究拖放示例，想从 csv 中读取数据。

我想将我的 csv 文件返回的数据重新格式化为所需的格式。 在拖放场景中，被拖动的元素具有 Array[3] 中的值，并被拖放到具有 r1val(n) 的元素上。当这些值匹配时，就会发生事件。 我想找到一种方法将第一列的值设置为键，如下面的对象所示。

文件.csv:

  col1,col2,col3,col4
  r1val1,r1val2,r1val3,r1val4
  r2val1,r2val2,r2val3,r2val4
  ....

需要的格式:

  var colSet = {
  r1val1 : ["r1val2","r1val3","r1val4"],
  r2val1 : ["r2val2","r2val2","r2val2"],
  ...
  } 

所需格式的console.log:

Object
  r1val1: Array[3]
  r2val1: Array[3]
  ...
__proto__: Object

我的目标是这个函数:

var DragDropManager = {
    dragged: null,
    droppable: null,
    draggedMatchesTarget: function() {
        if (!this.droppable) return false;
        return (colSet[this.droppable].indexOf(this.dragged) >= 0);
    }
}

Answer 1

这会生成一个 d3.map而不是 JavaScript 对象，但应该适用于您的情况(您仍然可以使用 obj[key] 访问对象之类的元素):

d3.csv('test.csv',function(error,rows){

    var obj = d3.map(rows, function(d){
      return d.col1;
    });
    obj.forEach(function(k,v){
      this[k] = [v.col2, v.col3, v.col4];
    });

    console.log(obj);
  });

示例 here .

在这一点上，我们都想多了，怎么样:

d3.csv('test.csv', function(error, rows) {
  var obj = {};
  rows.forEach(function(d){
    obj[d.col1] = [d.col2, d.col3, d.col4];
  });
  console.log(obj);
});

已更新 example .