Changeset 92638 in spip-zone


Ignore:
Timestamp:
Nov 3, 2015, 6:35:11 PM (4 years ago)
Author:
kent1@…
Message:

Réparer les tooltips

File:
1 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/shortcut_url/trunk/prive/objets/editer/shortcut_url_logs_graphs.html

    r92352 r92638  
    4141                .range(["couleur1", "couleur2", "couleur3", "couleur4", "couleur5", "couleur6", "couleur7", "couleur8", "couleur9", "couleur10"]);
    4242
    43         var width = 800,
     43        var width = 760,
    4444                height = 500;
    4545
    4646        var m_width = $("#map").width(),
    4747                width = width,
    48                 height = height,
    49                 tooltip = d3.selectAll(".tooltip_map");
     48                height = height;
    5049
    5150        var projection = d3.geo.mercator()
     
    7170        d3.json('[(#CHEMIN{json/regions.json})]', function(error, borders) {
    7271                collection = topojson.feature(borders, borders.objects.maedi_pays);
    73                
     72                var tooltip = d3.select("body")
     73                                .append("div")
     74                                .attr("class", "tooltip")
     75                                .style("opacity", 0);
    7476                for (var i = 0; i < collection.features.length; i++) {
    7577                        var iso2 = collection.features[i].properties.ISO2;
     
    8385                }
    8486
    85                 g.append("g")
    86                         .attr("id", "countries")
     87                g.attr("id", "countries")
    8788                        .selectAll("path")
    8889                        .data(collection.features)
     
    9192                        .attr("class", function(d) { return color_fill[d.properties['ISO2']]; })
    9293                        .attr("d", path)
    93                         .on("mouseover", function (d,event) {
    94 
     94                        .on("mouseenter", function (d,event) {
    9595                                if(tooltip_click[d.properties['ISO2']] == undefined)
    9696                                        var tooltip_data = "";
     
    9999
    100100                                tooltip.html("<strong>" + d.properties['NAME_ISO'].toLowerCase() + "</strong> " + tooltip_data);
    101                                 if(d3.event.clientX && d3.event.clientY) {
    102                                         tooltip.style("left", (d3.event.clientX - 350)+ "px")
    103                                                 .style("top",(d3.event.clientY + 20) + "px").style("opacity", "1");
     101                                if(d3.event.pageX && d3.event.pageY) {
     102                                        tooltip.style("left", (d3.event.pageX + 20)+ "px")
     103                                                .style("top",(d3.event.pageY + 20) + "px").style("opacity", "1");
    104104                                }
    105105
    106106                        }).on("mousemove", function (d) {
    107 
    108                                 if(d3.event.clientX && d3.event.clientY){
    109                                         tooltip.style("left", (d3.event.clientX - 350)+ "px")
    110                                                 .style("top",(d3.event.clientY + 20) + "px");
     107                                if(d3.event.pageX && d3.event.pageY){
     108                                        tooltip.style("left", (d3.event.pageX + 20)+ "px")
     109                                                .style("top",(d3.event.pageY + 20) + "px");
    111110                                }
    112111
    113112                        }).on("mouseout", function (d) {
    114 
    115113                                return tooltip.style("opacity", "0");
    116 
    117114                        });
    118 
    119115        });
    120116
    121 
    122         // Affiche les bars verticales
     117        // Affiche les barres horizontales
    123118        var margin = {top: 20, right:20, bottom: 20, left: 20},
    124119                width = 760 - margin.left - margin.right,
     
    137132                .attr("transform", "translate(" + margin.bottom + "," + margin.top + ")");
    138133
     134        var tooltip2 = d3.select("body")
     135                                .append("div")
     136                                .attr("class", "tooltip tooltip2")
     137                                .style("opacity", 0);
    139138                data.forEach(function(d) { d.value = +d.value; });
    140139                data.sort(function(a, b) { return b.value - a.value; });
     
    143142                y.domain(data.map(function(d) { return d.label; }));
    144143
    145                 var bar = svg.selectAll("g.bar")
     144                var bar = svg.selectAll("g.bar")
    146145                        .data(data)
    147146                        .enter().append("g")
    148147                        .attr("class",  function(d) { return color(d.value); })
    149148                        .attr("transform", function(d) { return "translate(0," + y(d.label) + ")"; })
    150                         .on("mouseover", function (d,event) {
     149                        .on("mouseenter", function (d,event) {
    151150                                if(d.value > 10)
    152                                         tooltip.html("<strong>" + d.percent + " %</strong> ");
     151                                        tooltip2.html("<strong>" + d.percent + " %</strong> ");
    153152                                else
    154                                         tooltip.html("<strong>" + d.value + " <:shortcut_url:nb_click:></strong> (" + d.value + " %) ");
    155                                 if(d3.event.clientX && d3.event.clientY) {
    156                                         tooltip.style("left", (d3.event.clientX - 450)+ "px")
    157                                                 .style("top",(d3.event.clientY + 220) + "px").style("opacity", "1");
     153                                        tooltip2.html("<strong>" + d.value + " <:shortcut_url:nb_click:></strong> (" + d.value + " %) ");
     154                                if(d3.event.pageX && d3.event.pageY) {
     155                                        tooltip2.style("left", (d3.event.pageX +20)+ "px")
     156                                                .style("top",(d3.event.pageY + 20) + "px").style("opacity", "1");
    158157                                }
    159158
    160159                        }).on("mousemove", function (d) {
    161 
    162                                 if(d3.event.clientX && d3.event.clientY){
    163                                         tooltip.style("left", (d3.event.clientX - 450)+ "px")
    164                                                 .style("top",(d3.event.clientY + 220) + "px");
     160                                if(d3.event.pageX && d3.event.pageY){
     161                                        tooltip2.style("left", (d3.event.pageX + 20)+ "px")
     162                                                .style("top",(d3.event.pageY + 20) + "px");
    165163                                }
    166 
    167164                        }).on("mouseout", function (d) {
    168 
    169                                 return tooltip.style("opacity", "0");
    170 
     165                                return tooltip2.style("opacity", "0");
    171166                        });
    172167
     
    205200
    206201        $(document).ready(function($) {
    207 
    208202                        var json = [
    209203                                <BOUCLE_liste_shortcut_url_click_graph(SHORTCUT_URLS){id_shortcut_url}>
     
    222216
    223217                        var margin = {top: 60, right: 60, bottom: 60, left: 60},
    224                                 width = 800 - margin.left - margin.right,
     218                                width = 760 - margin.left - margin.right,
    225219                                height = 400 - margin.top - margin.bottom;
    226220
Note: See TracChangeset for help on using the changeset viewer.