Wie man web-element (id) von der element-position in D3.js force-Diagramm

Arbeite ich mit der D3.js Kraft-Diagramm, aber ich bin nicht in der Lage, um herauszufinden, die element-id aus dem element position (die ich kenne).

Ich bin mit Leap motion. Ich brauche, um zu simulieren, ein Maus-Ereignis (ein Klick, ein Schritt, ein ziehen, etc.) ohne eine Maus. Und, wenn ich richtig bin, um der Lage sein, dies zu tun, ich brauche, um herauszufinden, was ist die element-id aus den Koordinaten x und y (die Koordinaten weiß ich aus dem Leap motion-Zeiger). Also von dem, was Sie oben geschrieben haben, die ich brauche, um herauszufinden, die ('.Knoten').
Hier ist, was ich bereits versucht aber es hat nicht funktioniert:

Ist es möglich, verwenden Sie nicht die Maus, non-touch-Ereignisse zur Interaktion mit einem D3.js graph? Wenn ja, was ist der effizienteste Weg, um darüber zu gehen?

So habe ich diese Funktion (siehe unten), aber ich muss wissen, die element-id, um es richtig funktioniert: 

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

Vielen Dank für Eure Hilfe und Ideen.

  • Ich bearbeitet meine Antwort mit einer anderen Lösung. Einen Blick zu haben.
InformationsquelleAutor Jirka | 2014-10-11
  1. 5

    Wenn Sie möchten, den Zugang zu dem element, es ist implizit in D3 Iteratoren über this. 

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

    Wenn Sie wirklich brauchen, Zugriff auf die id, können Sie es mit der Auswahl.attr():

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

    Müssen Sie nicht verwenden each. Jeder der Iteratoren, wie attr oder style usw., haben 'dies' als das gebundene element:

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

    Wenn Sie möchten, dass die x-und y-Koordinaten eines Knoten, muss es ein Teil der Daten:

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

    Wenn Sie wirklich brauchen, die Knoten Attribute selbst, können Sie die attr accessor.

    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'));
});

    EDIT: Es sieht aus wie Sie brauchen ein element Referenz, aber die einzige Sache, die Sie wissen über die Knoten im Kontext seiner position. Eine Lösung ist die Suche über alle Knoten für einen Knoten mit den passenden Koordinaten.

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

    Aber das gibt dir nur die node-Objekt, nicht das element selbst. Sie werden wahrscheinlich brauchen, um zu speichern das element Referenzen auf die Knoten:

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

    Mit, dass, sollten Sie in der Lage sein, um Zugriff auf das element und seine id.

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

    Den brute-force-Suche ist gut für eine kleine Anzahl von Knoten, aber wenn Sie schieben eine große Anzahl von Knoten, die Sie möglicherweise verwenden möchten D3 quadtree (Beispiel) um die Suche zu beschleunigen.

    • Ich habe die Frage bearbeitet, um genauer zu sein, schauen Sie bitte in es. Dank
    • Danke Mann 🙂 Es funktioniert, aber es gibt einige performance-Probleme, obwohl ich nicht verwenden Letzte Lösung. Es gibt wahrscheinlich im Zusammenhang mit dem leap-motion-Gerät.
    InformationsquelleAutor t.888
  2. 2

    Verwendung d3.wählen Sie('#yourElementId')

    Für mehr info check this out: https://github.com/mbostock/d3/wiki/Selections

    • Ich weiß nicht, elementId, dass ist genau das, was ich nicht versucht zu finden, von der x-und y-Koordinaten.
    • Sorry, habe ich nicht verstanden, deine Frage gut. Vielleicht sollten Sie versuchen, zu iterieren über alle Elemente und überprüfen Sie, ob Ihre Koordinaten innerhalb des Elements.
    InformationsquelleAutor slotomo
Schreibe einen Kommentar