web - 如何从D3.js力图中的元素位置获取Web元素(id)

Question

我正在使用 D3.js 力图，但我无法从元素位置(我知道)找到元素 id。

我正在使用 Leap Action 。我需要在没有鼠标的情况下模拟鼠标事件(单击、移动、拖动等)。而且，如果我是对的，为了能够做到这一点，我需要从坐标 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

如果您想要访问该元素，它可以通过 this 隐含在 D3 的迭代器中。

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 等，都将 'this' 作为绑定(bind)元素:

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)以加快搜索速度。