it-swarm.com.de

Mausposition in D3

Ich wollte nur die Mausposition mithilfe von D3 mithilfe des folgenden Codes ermitteln:

var x = 0;

svg.on('mousemove', function () {
   x = d3.mouse(this)[0];         
});

aber was ich immer bekomme x = 0! . Durch die Verwendung von console.log() kann ich sehen, dass der x-Wert nur in der function() geändert wird, aber x den Initiate-Wert = 0 hat.

Wie kann ich den x-Wert speichern und später in meiner Anwendung verwenden?

42
I3i0

Sie müssen ein Array verwenden. Das speichert x und y wie: 

var coordinates= d3.mouse(this);
var x = coordinates[0];
var y = coordinates[1];

// D3 v4
var x = d3.event.pageX - document.getElementById(<id-of-your-svg>).getBoundingClientRect().x + 10
var y = d3.event.pageY - document.getElementById(<id-of-your-svg>).getBoundingClientRect().y + 10
71
Sudarshan

Sie können die Klick- und Ziehfunktion durch dieses Beispiel sehr gut verstehen. Hoffe, es hilft.

 var point = d3.mouse(this)
  , p = {x: point[0], y: point[1] };

http://jsfiddle.net/mdml/da37B/

14
user3603902

V3:

var svg = d3.select('body').append('svg')
    .attr('width', 600)
    .attr('height', 600)
    .on('mousemove', function() {
      console.log( d3.mouse(this) ) // log the mouse x,y position
    });

V4 und V5:

var svg = d3.select('body').append('svg')
    .attr('width', 600)
    .attr('height', 600)
    .on('mousemove', function() {
      console.log( d3.event.pageX, d3.event.pageY ) // log the mouse x,y position
    });
7
duhaime

Ich vermute, Sie probieren vielleicht so etwas aus:

var x = 0;

svg.on('mousemove', function () {
   x = d3.mouse(this)[0];         
});

console.log(x);

Wenn Sie nicht über sehr schnelle Hände verfügen, schreibt dies immer "0" an die Konsole, da das gesamte Skript ausgeführt wird, während Sie nach der Maus greifen. Setzen Sie Ihr Snippet direkt in die Konsole, bewegen Sie die Maus und geben Sie "x" in die Konsole ein. Sie sollten den neuesten x-Wert sehen.

Ich hoffe, das hilft, aber ich habe die Frage vielleicht falsch verstanden.

0
Eric