显示信息到工具提示 [英] display info into tooltip

问题描述

我在这里有一个图表： - 代码链接

让我告诉你我在这里想要实现什么。一年中的几个月从多行 - 一月，二月，三月，....现在，当我悬停月份，我想显示week1，week2，....，week4为1月，week5，week6，...，week8为2月等等。也就是说，每个月四个星期我将使用php回显每周数据的值如 - week1：23，week2：45，week3：56，week4：75等.....

请帮助。

我试图使用.csv文件将所有52周的信息，但没有运气。
涉及的代码：

 'use strict'; var dataset = [1,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'] = ['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（'。图表包装器）offsetHeight，minOfWH = Math.min（width，height）/ 2，initialAnimDelay = 300，arcAnimDelay = 150，arcAnimDur = 3000，secDur = 1000，secIndividualdelay = 150; var radius = undefined;的宽度和高度来设置图表radiusif（minOfWH> 200）{radius = 200;} else {radius = minOfWH;} // append svgvar svg = d3.select（'。chart-wrapper'）append（'svg'）。attr（{'width'：width， height'：height，'class'：'pieChart'}）append（'g'）; svg.attr（''''''''''+ width / 2 + '}）; //用于绘制slicesvar arc = d3.svg.arc（）。outerRadius（radius * 0.6）.innerRadius（radius * 0.45）; //用于标签和polylinesvar outerArc = d3.svg.arc （半径* 0.85）.outerRadius（半径* 0.85）; // d3颜色生成器//让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 d（i）{return i * arcAnimDelay + initialAnimDelay;}。duration（arcAnimDur）.ease（'elastic'）。style（'opacity'，1）.attr（'transform'，'rotate ）'）; 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（）。append（'text'）。attr（'dy'，'0.35em'）。style（opacity，0）.attr（cursor，default ，function（d，i）{return colors [i];}）text（function（d，i）{return weeks [i];} this切片的质心var pos = outerArc.centroid（d）; //定义文本标签的左右对齐pos [0] = radius *（midAngle（d） 

解决方案

您是否尝试在每个元素上使用data-tag来存储数据，然后使用jQuery来读取数据并将其推送到工具提示。这是我通常处理工具提示数据的方式，因为它可以在元素上动态更新。

示例：

  text.on（mouseover，function（）{
 var tip = $（this）.attr（data-tip）; 
 yourtooltip.text tip）; 
}）; 
 
< div class =textdata-tip =这是您要在工具提示中显示的数据。>< / div> 
  

I have a chart here :- code link

Let me tell you what I am trying to achieve here.There are months of the year from the poly-lines - January,February,March,.... Now when i hover over the months,I want to display week1,week2,....,week4 for January ,week5,week6,...,week8 for February and so on.That is,four weeks for each month I will use php to echo the value of the weekly data like - week1 :23,week2:45,week3:56 ,week4:75 etc.....

kindly help.

I tried to use a .csv file will all the 52 weeks info,but no luck. JavaScript involved :

'use strict';

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<br>is " + colors[i] + "<span style='color:" + colors[i] + ";'><br>This is a text in that color</span>").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);
};

解决方案

Have you tried using the data- tag on each element to store the data and then use jQuery to read the data and push it to the tooltip. This is how I usually handle tooltip data since it can be dynamically updated on the element.

Example:

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

<div class="text" data-tip="this is the data you want to display in your tooltip."></div>

这篇关于显示信息到工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！