cartographie dojo - problème avec onmousemove sur tableau PlotArea

Question

Je suis en train de construire un tableau qui dessine une ligne perpendiculaire à l'axe X sous le curseur. En utilisant cela comme une ligne directrice:

http: //dojo-toolkit.33424.n3 .nabble.com / Charting-events-td40659.html

Je suis en utilisant le code suivant pour attraper « mouseout » & « mousemove » pour la zone de tracé de graphique (ne comprend pas les marges de graphique et étiquettes)

        chart = new dojox.charting.Chart2D("rating");
        chart.addPlot("default", {
            type: "Bubble"
        });

        chart.addPlot("grid", {
            type: "Grid",
            hMinorLines: true
        });

        var plotArea = chart.surface.rawNode.children[1];
        dojo.connect(plotArea, "onmousemove", this, this.showRatingHighlight);
        dojo.connect(plotArea, "onmouseout", this, this.hideRatingHighlight);

En général, il fonctionne comme prévu. mais j'ai aussi une grille tracée sur la carte, et chaque fois que la souris passe sur les lignes de la grille, je reçois un événement « mouseout ». Je perds aussi l'événement mousemove lorsque la souris passe au-dessus d'un marqueur avec une action toolTip / highlight en place.

Q: Comment puis-je attraper mousemove / mousemove sur le « PlotArea » sans perdre sur les quadrillages ou marqueurs de tracé

Q: Y at-il une meilleure façon d'obtenir le « PlotArea » du tableau pour le calcul des décalages

Answer 1

A1: superposer une div transparent sur un tableau des événements et capture l'utiliser. Caveat - très probablement il va bloquer les événements à venir à des marqueurs et des lignes de grille

.

BTW, votre exemple suppose que vous utilisez uniquement équarrisseurs SVG ou VML. De façon plus générale à des événements de capture:

var h1 = surface.connect("onmouseout", f1);
var h2 = shape.connect("onmouseout", f2);
// ...
shape.disconnect(h2);
surface.disconnect(h1);

A2: Après un tableau a été rendu (et toute la géométrie calculée), vous pouvez extraire les dimensions comme ceci:

chart.dim; // {width, height} --- dimensions of the chart
chart.offsets; // {l, b, r, t} --- offsets from dimensions
var plotArea = {
  // in pixels relative to chart's top-left corner
  x: chart.offsets.l,
  y: chart.offsets.t,
  width:  chart.dim.width  - chart.offsets.l - chart.offsets.r,
  height: chart.dim.height - chart.offsets.t - chart.offsets.b
};

Utilisez dojo.position() ou une fonction similaire pour obtenir la position de votre tableau sur la page, si vous avez besoin des coordonnées absolues niveau de la page.