如何从D3.js力图形元素位置

Question

我与D3.js力图形工作，但我无法找出从元件位置的元素ID（我知道让网络元素（ID） ）。

我使用的大跃进运动。我需要在没有鼠标的情况下模拟鼠标事件（点击，移动，拖动等）。而且，如果我是对的，为了能够做到这一点，我需要找出坐标x和y中的元素id是什么（我从Leap运动指针中知道这些坐标）。所以从你上面写的，我需要找出（'.node'）。 以下是我已经尝试过，但没有奏效：

Is it possible to use non-mouse, non-touch events to interact with a D3.js graph? If so, what is the most efficient way to go about it?

所以我用这个函数（见下文），但我需要知道元素的id，使其正常工作：

//graph.simulate(document.getElementById("r_1"), 'dblclick', {pointerX: posX, pointerY: posY}); 
//here id r_1 is hardcoded, but I need to find out id from x and y coordinates. 

this.simulate = function (element, eventName) { 
    function extend(destination, source) { 
     for (var property in source) 
      destination[property] = source[property]; 
     return destination; 
    } 

    var eventMatchers = { 
     'HTMLEvents': /^(?:load|unload|abort|error|select|change|submit|reset|focus|blur|resize|scroll)$/, 
     'MouseEvents': /^(?:click|dblclick|mouse(?:down|up|over|move|out))$/ 
    }; 

    var defaultOptions = { 
     pointerX: 0, 
     pointerY: 0, 
     button: 0, 
     ctrlKey: false, 
     altKey: false, 
     shiftKey: false, 
     metaKey: false, 
     bubbles: true, 
     cancelable: true 
    }; 

    var options = extend(defaultOptions, arguments[2] || {}); 
    var oEvent, eventType = null; 

    for (var name in eventMatchers) { 
     if (eventMatchers[name].test(eventName)) { 
      eventType = name; 
      break; 
     } 
    } 

    if (!eventType) 
     throw new SyntaxError('Only HTMLEvents and MouseEvents interfaces are supported'); 

    if (document.createEvent) { 
     oEvent = document.createEvent(eventType); 
     if (eventType == 'HTMLEvents') { 
      oEvent.initEvent(eventName, options.bubbles, options.cancelable); 
     } 
     else { 
      oEvent.initMouseEvent(eventName, options.bubbles, options.cancelable, document.defaultView, 
       options.button, options.pointerX, options.pointerY, options.pointerX, options.pointerY, 
       options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, element); 
     } 
    element.dispatchEvent(oEvent); 
    } 
    else { 
     options.clientX = options.pointerX; 
     options.clientY = options.pointerY; 
     var evt = document.createEventObject(); 
     oEvent = extend(evt, options); 
     element.fireEvent('on' + eventName, oEvent); 
    } 
    return element; 
} 

非常感谢您的帮助和意见。

Answer 1

如果你想访问的元素，它在D3的迭代器通过this是隐含的。

d3.selectAll('.node').each(function(d) { 
    console.log(this); // Logs the element attached to d. 
}); 

如果你真的需要访问ID，您可以用selection.attr（）得到它：

d3.selectAll('.node').each(function() { 
    console.log(d3.select(this).attr('id')); // Logs the id attribute. 
}); 

您不必使用each。任何迭代器，如attr或style等，有“本”为绑定元素：

d3.selectAll('.node').style('opacity', function(d) { 
    console.log(this);// Logs the element attached to d. 
}); 

如果你想在x和节点y坐标，它的部分数据：

d3.selectAll('.node').each(function(d) { 
    console.log(d.x, d.y); // Logs the x and y position of the datum. 
}); 

如果你真的需要的节点属性本身，你可以使用attr访问。

d3.selectAll('.node').each(function(d) { 
    // Logs the cx and cy attributes of a node. 
    console.log(d3.select(this).attr('cx'), d3.select(this).attr('cy')); 
}); 

编辑：它看起来像你需要一个元素的引用，但你知道在上下文中节点的唯一事情是它的位置。一种解决方案是搜索所有节点上的匹配坐标的节点。

// Brute force search of all nodes. 
function search(root, x, y) { 
    var found; 
    function recurse(node) { 
    if (node.x === x && node.y === y) 
     found = node; 
    !found && node.children && node.children.forEach(function(child) { 
     recurse(child); 
    }); 
    } 
    recurse(root); 
    return found; 
} 

但是，这只给你节点对象，而不是元素本身。您可能需要的元素的引用存储节点上：

// Give each node a reference to its dom element. 
d3.selectAll('.node').each(function(d) { 
    d.element = this; 
}); 

有了到位，你应该能够访问元素，并获得其ID。

var id, node = search(root, x, y); 
if (node) { 
    id = node.element.getAttribute('id'); 
} 

的强力搜索是罚款少数节点，但如果你推大量节点的您可能需要使用D3的quadtree(example)以加快搜索。

Answer 2

使用d3.select（ '＃yourElementId'）

欲了解更多信息检查了这一点：https://github.com/mbostock/d3/wiki/Selections