显示数据之间的依赖关系(映射/矩阵)

时间:2014-10-15 15:36:41

标签: javascript mapping

我想显示数据之间的依赖关系,但我不知道数据如何以最佳方式存储和检索?

我有这些数据依赖:

  | 1 | 2 | 3 | 4 | 7
----------------------
a | x | x | x | x | 
----------------------
b | x |   |   | x |
----------------------
c |   |   |   | x | x

我在javascript中映射如下。不确定是否有更好的构造?

var a = [1, 2, 3, 4,]; 
var b = [1, 4]; 
var c = [4, 7]; 
var A = ["a", "b", "c"]; 

我想表现的是:

  • 如果我点击" a",它会告诉我" a"连接到" 1,2,3,4"
  • 如果我点击" 1",它会告诉我" 1"已连接到" a,b"

我目前的方法(另见fiddle):

    

<title>TestDependencies</title>
<script type="text/javascript" charset="utf-8">

var a = [1, 2, 3, 4,]; 
var b = [1, 4]; 
var c = [4, 7]; 
var A = ["a", "b", "c"]; 

function select(y) {
A.forEach(function(entry) {
// console.log(entry);
document.write(entry + ":" + eval(entry) + "<br>"); 

});
y.forEach(function(entry) {
document.write(entry); 
}); 
// document.write(y);     
}

function selectX(x) {
    var match = [];

    A.forEach(function(entry) {
    // console.log(entry);
    // document.write(entry + ":" + eval(entry) + "<br>"); 
    // console.log( x + " in " + entry );
    // console.log( eval( entry ) );
    var found = eval( entry ).indexOf( x );
    if ( found > -1 ) { 
        match.push( entry );
    }
});

console.log( x + " is connected to " + match);

}

function selectY(y) {
//document.write(y); 
    y.forEach(function(entry) {
        var link = '<a href="javascript:selectX(' + entry + ');">' + entry + '</a>'; 
        document.write(link + ", "); 
    }); 
}

function selectA(  ) { 
    A.forEach(function(entry) {
        var link = '<a href="javascript:selectB(' + entry + ', \'' + entry + '\');">' + entry + '</a>'; 
        document.write(link + ", "); 
    }); 
}

function selectB( x, y ) { 
    console.log( y + " is connected to " + x )
}


selectY(a); 
selectY(b); 
selectY(c); 
selectA(  );

</script>

1 个答案:

答案 0 :(得分:0)

我见过您使用.forEach(),因此我认为.filter()sort()map()也可用。我已经创建了一个A对象,所以属性名称没有第二个数组,首先是:它不使用eval()。所有数组都排序(asc)并删除双精度数。必须在开始时和A已更改时调用函数prepare()

var A = {
    a: [9, 5, 1, 2, 3, 4],
    b: [18, 1, 4],
    c: [4, 7, 7, 7]
};

var div = $("#Test");

function prepare() {
    var result = [];
    for (var p in A) {
        A[p] = A[p].filter(function(n, i) {
            if (result.indexOf(n) == -1) result.push(n);
            return A[p].lastIndexOf(n) == i;
        }).sort(function(a, b) {return a > b})
    }
    result.sort(function(a, b) {return a > b;}, 0)
          .forEach(function(n) {createLink('Props', n);});
    for (var p in A) createLink('Nums', p);
}

function createLink(f, x) {
    div.append(
        '<a href="javascript:select' + f + '(\'' + x  + '\')">' + x + '</a>, ' 
    );
}

function selectProps(x) {
    console.log(
        x, ' is connected to ', 
        Object.keys(A).filter(function(p) {
            return A[p].indexOf(+x) > -1;
        }).join(',')
    );
}

function selectNums(p) {
    console.log(p, ' is connected to ', A[p].join(','))
}

A.d = [22, 9, 4, 4, 7, 7];

prepare();

工作DEMO here