d3.csv 将列值映射为对象中的键答案

【问题标题】：d3.csv map column values as keys in objectd3.csv 将列值映射为对象中的键
【发布时间】：2023-03-24 07:28:01
【问题描述】：

我正在处理拖放示例，想从 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);
    }
}

【问题讨论】：

stackoverflow.com/questions/23762822/… 你可以用 jquery 解析，但这可能不是最好的。
@DotDotBeep - 我已经包含了需要对象的函数。

标签： javascript csv d3.js

【解决方案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。

【讨论】：

马克我用过d3.map，到现在还是不行，我再试试。我的“更新”中的函数确实创建了正确的格式，但每行一次。我有一个适用于对象的合并函数，现在我必须弄清楚如何将它与循环一起使用。
@EdDie，查看新答案。我们都太花哨了:)

【解决方案2】：

d3.csv("data/language.csv", function(error, data) {


//reformatting data array content stripping 'key' and 'value'


var refData = data.map(function(d){ 
var rObj = {};
rObj[d.col1] = d.col3;
return rObj;
});


// function that merges Objects
function merge(target, source) {      
    /* Merges two (or more) objects,
   giving the last one precedence */   
if ( typeof target !== 'object' ) {
    target = {};
}   
for (var property in source) {      
    if ( source.hasOwnProperty(property) ) {          
        var sourceProperty = source[ property ];         
        if ( typeof sourceProperty === 'object' ) {
            target[ property ] = util.merge( target[ property ],    sourceProperty );
            continue;
        }        
        target[ property ] = sourceProperty;          
    }     
}    
for (var a = 2, l = arguments.length; a < l; a++) {
    merge(target, arguments[a]);
}   
return target;
};


//loops through the refData creating dwarfSet
for (i = 0; i < refData.length; i++) {
var dwarfSet = merge(refData[0],refData[i]);
};

这段代码实际上产生了所需的对象。我对循环函数并不完全满意，因为它每行生成一个 dwarfSet，而不是整体生成一个。

非常欢迎提出改进建议。

【讨论】：

【解决方案3】：

我认为这可以简单地完成：

var obj = d3.nest()
  .key(function(d) { return d.r1val1; })
  .entries(data);

http://learnjsdata.com/group_data.html

【讨论】：