Javascript 使用D3.js获取对具有给定节点的链接的引用

我有一些非常标准的代码，可以创建一组SVG：基于

节点

数据的圆圈和基于

链接

数据的SVG:line

我想在圆和线上放置一些滚动代码，这样滚动一个圆会突出显示该圆、连接到该圆的线以及这些线末尾的任何其他圆

我面临的挑战是，当我处理由圆圈触发的事件时，获取对

链接

数据的引用，该圆圈只附加了

节点

数据

d3nodes = d3svg.selectAll( ".node" )
    .data( nodes )
    .enter().append( "circle" )
        .attr( "class", "node" )
        .attr( "r", NODE_RADIUS )
        .attr( "cx", function( d ){ return d.x; } )
        .attr( "cy", function( d ){ return d.y; } )
        .on( "mouseover", function( d ){ console.log( d ); } ); // Node datum

d3links = d3svg.selectAll( ".link" )
    .data( links )
    .enter().append( "line" )
        .attr( "class", "link" )
        .attr( "x1", function( d ){ return nodes[d.source].x; } )
        .attr( "y1", function( d ){ return nodes[d.source].y; } )
        .attr( "x2", function( d ){ return nodes[d.target].x; } )
        .attr( "y2", function( d ){ return nodes[d.target].y; } )
        .on( "mouseover", function( d ){ console.log( d ); } ); // Link datum

一旦我引用了

链接

，我就可以使用以下函数获取链接列表，其中该节点是源或目标：

/**
 * Gets up to 4 nodes, that represent all the nodes linked to this node
 * (either as targets or source).
 *
 * @param {Object} node Object from the "nodes" array (so, the data, not the d3nodes)
 * @param {Object[]} links Array of links (again, the data that was passed to the force layout)
 * @returns {Array} Matching node objects (again, not DOM elements)
 */
function getLinks( node, links ){
    var nodes = [],
        i = 0, l = links.length,
        link;

    for ( ; i < l; ++i ){
        link = links[i];
        if ( link.target === node ){
            nodes.push( link.source );
            continue;
        }

        if ( link.source === node ){
            nodes.push( link.target );
        }
    }

    return nodes;
}

/**
*获取最多4个节点，它们表示链接到此节点的所有节点
*（作为目标或源）。
*
*@param{Object}node对象来自“nodes”数组（因此，是数据，而不是节点）
*@param{Object[]}links链接数组（同样是传递给force布局的数据）
*@返回{Array}匹配的节点对象（同样，不是DOM元素）
*/
函数getLinks（节点，链接）{
变量节点=[]，
i=0，l=links.length，
链接
对于（；i

但是我的函数确实需要引用

链接

数组，我不确定如何从似乎只获取

节点

数据的事件处理程序中获取它

我希望避免使用任何类型的全局变量或全局查找表，因为我将在一个页面上有任意数量的这些图，它们都需要保持独立

在过去，我在DOM元素本身上存储了对

节点

、

链接

和

force

对象的引用（使用jQuery.data（）），但这真的是最佳实践吗

---

我觉得我错过了一个重要的概念点，希望有人能给我一些启示。

你看到了吗？@Larskothoff我没有看到，我很惊讶在搜索或建议中没有出现这一点——我的Google fu今天一定很弱。Mike的回答更多地涉及到链接查找的性能，而不是访问/确定链接和节点数据的范围，因此我认为这两个问题有重叠之处，但有区别。它提供了一种方法来完成您试图做的事情，对吗？如中所示，您可以使用该方法使其工作吗？我可能不知道您的问题有什么不同，以及为什么这种方法不适用。@Larskothoff you's not right:）但是，我不确定它是否完全解决了我的情况，因为我在同一页上运行了许多类似（但不同）的图。因此，我需要某种全局结构，将特定的图形链接到节点和链接列表。我倾向于在节点记录中添加对链接的引用（嘲笑这将导致的循环引用）！好的，我明白了。是的，我认为将链接信息附加到节点基准是一种方法。