afficher les infos dans l’infobulle

J’ai un graphique ici: – lien de code

Laissez-moi vous dire ce que j’essaie de faire ici. Il y a des mois de l’année à partir des lignes multiples – janvier, février, mars, …. Maintenant, quand je survole les mois, je veux afficher week1, week2, …., semaine4 pour janvier, semaine5, semaine6, …, semaine8 pour février et ainsi de suite. C’est-à-dire quatre semaines pour chaque mois, je vais utiliser php pour rappeler la valeur des données hebdomadaires comme – semaine1: 23, semaine2: 45, semaine3: 56, semaine4: 75 etc …..

aide aimablement.

J’ai essayé d’utiliser un fichier .csv toutes les informations de 52 semaines, mais pas de chance. JavaScript impliqué:

'use ssortingct'; var dataset = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]; // let colors = ['#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3', '#fdb462', '#b3de69', '#fccde5', '#d9d9d9', '#bc80bd']; let colors = ['#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3', '#fdb462', '#b3de69', '#fccde5', '#d9d9d9', '#bc80bd', '#bc80bd', '#bc80bd']; var weeks = ['January - 2016', 'February -2016', 'March - 2016', 'April - 2016', 'May - 2016', 'June - 2016', 'July - 2016', 'August - 2016', 'September - 2016', 'October - 2016', 'November - 2016', 'December - 2016']; var width = document.querySelector('.chart-wrapper').offsetWidth, height = document.querySelector('.chart-wrapper').offsetHeight, minOfWH = Math.min(width, height) / 2, initialAnimDelay = 300, arcAnimDelay = 150, arcAnimDur = 3000, secDur = 1000, secIndividualdelay = 150; var radius = undefined; // calculate minimum of width and height to set chart radius if (minOfWH > 200) { radius = 200; } else { radius = minOfWH; } // append svg var svg = d3.select('.chart-wrapper').append('svg').attr({ 'width': width, 'height': height, 'class': 'pieChart' }).append('g'); svg.attr({ 'transform': 'translate(' + width / 2 + ', ' + height / 2 + ')' }); // for drawing slices var arc = d3.svg.arc().outerRadius(radius * 0.6).innerRadius(radius * 0.45); // for labels and polylines var outerArc = d3.svg.arc().innerRadius(radius * 0.85).outerRadius(radius * 0.85); // d3 color generator // let c10 = d3.scale.category10(); var tooltip = d3.select("body").append("div").attr("class", "tooltip").style("opacity", 0); var pie = d3.layout.pie().value(function(d) { return d; }); var draw = function draw() { svg.append("g").attr("class", "lines"); svg.append("g").attr("class", "slices"); svg.append("g").attr("class", "labels"); // define slice var slice = svg.select('.slices').datum(dataset).selectAll('path').data(pie); slice.enter().append('path').attr({ 'fill': function fill(d, i) { return colors[i]; }, 'd': arc, 'stroke-width': '25px' }).attr('transform', function(d, i) { return 'rotate(-180, 0, 0)'; }).style('opacity', 0).transition().delay(function(d, i) { return i * arcAnimDelay + initialAnimDelay; }).duration(arcAnimDur).ease('elastic').style('opacity', 1).attr('transform', 'rotate(0,0,0)'); slice.transition().delay(function(d, i) { return arcAnimDur + i * secIndividualdelay; }).duration(secDur).attr('stroke-width', '5px'); var midAngle = function midAngle(d) { return d.startAngle + (d.endAngle - d.startAngle) / 2; }; var text = svg.select(".labels").selectAll("text").data(pie(dataset)); text.enter().append('text').attr('dy', '0.35em').style("opacity", 0).attr("cursor", "default").style('fill', function(d, i) { return colors[i]; }).text(function(d, i) { return weeks[i]; }).attr('transform', function(d) { // calculate outerArc centroid for 'this' slice var pos = outerArc.centroid(d); // define left and right alignment of text labels pos[0] = radius * (midAngle(d) < Math.PI ? 1 : -1); return 'translate(' + pos + ')'; }).style('text-anchor', function(d) { return midAngle(d) < Math.PI ? "start" : "end"; }).transition().delay(function(d, i) { return arcAnimDur + i * secIndividualdelay; }).duration(secDur).style('opacity', 1); text.on("mousemove", function(d, i) { tooltip.html("the color here
is " + colors[i] + "
This is a text in that color
").style('top', d3.event.pageY - 6 + 'px').style('left', d3.event.pageX + 14 + 'px').style("opacity", 1); }).on("mouseout", function(d) { tooltip.style("opacity", 0); }); var polyline = svg.select(".lines").selectAll("polyline").data(pie(dataset)); polyline.enter().append("polyline").style("opacity", 0.5).attr('points', function(d) { var pos = outerArc.centroid(d); pos[0] = radius * 0.95 * (midAngle(d) < Math.PI ? 1 : -1); return [arc.centroid(d), arc.centroid(d), arc.centroid(d)]; }).transition().duration(secDur).delay(function(d, i) { return arcAnimDur + i * secIndividualdelay; }).attr('points', function(d) { var pos = outerArc.centroid(d); pos[0] = radius * 0.95 * (midAngle(d) < Math.PI ? 1 : -1); return [arc.centroid(d), outerArc.centroid(d), pos]; }); }; draw(); var button = document.querySelector('button'); var replay = function replay() { d3.selectAll('.slices').transition().ease('back').duration(500).delay(0).style('opacity', 0).attr('transform', 'translate(0, 250)').remove(); d3.selectAll('.lines').transition().ease('back').duration(500).delay(100).style('opacity', 0).attr('transform', 'translate(0, 250)').remove(); d3.selectAll('.labels').transition().ease('back').duration(500).delay(200).style('opacity', 0).attr('transform', 'translate(0, 250)').remove(); setTimeout(draw, 800); };

Avez-vous essayé d’utiliser l’enregistrement de données sur chaque élément pour stocker les données, puis utilisez jQuery pour lire les données et les transférer dans l’info-bulle. C’est ainsi que j’ai l’habitude de traiter les données d’info-bulle, car elles peuvent être mises à jour de manière dynamic sur l’élément.

Exemple:

 text.on("mouseover", function() { var tip = $(this).attr("data-tip"); yourtooltip.text(tip); });