使用D3.js

Question

我有一些非常标准的代码可以创建一堆SVG：基于node数据的圈子和基于link数据的SVG：行。

我想在圆圈和线条上放置一些翻转代码，以便在圆圈上滚动突出显示该圆圈，连接到它的线条以及这些线条末端的任何其他圆圈。

当我处理由圈子触发的事件时，我所遇到的挑战是获取link数据的引用，该圈子仅附加node数据。

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

一旦我引用了links，我就可以使用以下函数来获取该节点是源节点或目标节点的链接列表：

/**
 * 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;
}

但是我的函数确实需要对links数组的引用，而且我不确定如何从事件处理程序中获取它只看似只获得node数据。 / p>

我想避免使用任何类型的全局变量或全局查找表，因为我将在页面上包含任意数量的这些图形，并且它们都需要保持独立。 / p>

在过去，我已经在DOM元素本身上存储了对nodes，links和force对象的引用（使用jQuery.data（）），但是那真的是最好的做法吗？

我觉得我错过了一个重要的概念点，并希望有人可以解释一下。