显示弹出/信息提示/工具提示作为悬停特定文本 [英] display popup/infotip/tooltip as hover a particular text
本文介绍了显示弹出/信息提示/工具提示作为悬停特定文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有图表，
http://codepen.io/Siddharth11/pen/ LVQmjN
当我将鼠标悬停在上图中右侧的颜色代码上时，我要显示一个弹出窗口。
我将为每个颜色代码显示seprete信息。我们如何为每个颜色代码创建一个单独的弹出窗口。
地图： http://codepen.io/andreic/pen/CJoze
或这样： http://codepen.io/anon/pen / woJMrX
这个问题没有提取任何正确的响应，但试图使用一个jquery插件（poshy提示），并试图解决这个问题。但没有运气。我已经重新发布的问题与取得的进展。请参考当前情况的链接代码： jquery插件将数据绑定到工具提示（poshy tip）
'use strict'; var dataset1 = [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 = ['＃67001f'，'＃b2182b'，'＃d6604d'，'＃f4a582'，'＃fddbc7'，'＃e0e0e0' bababa'，'＃878787'，'＃4d4d4d'，'＃1a1a1a'，'＃1a1a1a'，'＃1a1a1a']; var weeks = ['January-2016'，'February'，'March'，'＃fdae61 '，'＃fee08b'，'＃e6f598'，'＃abdda4'，'＃66c2a5'，'＃3288bd'，'＃5e4fa2'，'＃1a1a1a'，'＃1a1a1a']; 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; //计算宽度和高度的最小值以设置图表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（' '}）; //用于绘制slicesvar arc = d3.svg.arc（）。outerRadius（radius * 0.6）.innerRadius（radius * 0.45）; //用于标签和polylinesvar outerArc = d3.svg.arc （radius * 0.85）.outerRadius（radius * 0.85）; // d3 color generator // let c10 = d3.scale.category10（）; var pie = d3.layout.pie 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（dataset1）.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（dataset1））; text.enter（）。append（'text'）。attr（'dy'，'0.35em'）。style（opacity，0）.style（'fill'，function（d，i）{return colors [ i）;}）。text（function（d，i）{return weeks [i];}）。attr（'transform'，function（d）{//计算outerArc质心var pos = outerArc。 centroid（d）; //定义文本标签的左右对齐pos [0] = radius *（midAngle（d）
body {overflow ：隐藏font-size：16px;}。chart-wrapper {width：100％;高度：100％; background-color：＃0d0d0d; position：absolute;} path {stroke：＃0d0d0d; / * stroke-width：5px; * / cursor：pointer; -webkit-transition：fill 250ms; transition：fill 250ms;} path：hover {/ * stroke-width：10px; * / fill：#fff;} text {font-size：.8em; text-transform：uppercase; letter-spacing：.5px;} polyline {fill：none; stroke：#fff; stroke-width：2px; stroke-dasharray：5px;} button {position：relative; top：20px; left：820px; text-transform：uppercase; padding：5px 10px; outline：none; font-size：1.2em; background-color：transparent; color：#fff; border：1px solid #fff; letter-spacing：1px; -webkit-transition：all 250ms; transition：all 250ms;} button：hover {background-color：#fff;颜色：＃0d0d0d; box-shadow：0 0 2px #fff;} button：active {opacity：0.5;}
<！DOCTYPE html>< html>< head> < meta charset =UTF-8> < title>疯狂饼图< / title> < link rel =stylesheethref =https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css> < link rel =stylesheethref =css / style.css>< / head>< body> < div class =chart-wrapper>< / div> < button onclick ='replay（）'>每月< / button> < button type =button>每周< / button> < script src ='http：//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'>< / script> < script src =js / index.js>< / script>< / body>< / html> 解决方案这可能是太宽泛了，但这是我喜欢创建工具提示没有任何外部库或插件。它基于创建< div> ，我们将使用opacity显示/隐藏。
，使用带有名为tooltip类的div或任何其他名称设置工具提示的CSS样式：
div .tooltip {
position：absolute;
/ *你的其他样式这里* /;
}
然后，设置一个工具提示变量：
var tooltip = d3.select（body）append（div）
.attr（class，tooltip）
.style（opacity，0）;
这个div有0个不透明度。然后只需要显示 mouseover 或 mousemove 上的工具提示：
text.on（mousemove，function（d）{
tooltip.html（Hello，I'm< br> tooltip！ $ b .style（'top'，d3.event.pageY - 6 +'px'）
.style（'left'，d3.event.pageX + 10 +'px'）
.style （opacity，1）;
}）on（mouseout，function（d）{
tooltip.style（opacity，0）;
}
您可以使用HTML标签为工具提示中的文本设置样式，使其粗体，斜体等
这是您的CodePen： http ：//codepen.io/anon/pen/rWyyra？editors = 0010
编辑：尽管这是正确答案对于您在问题中提出的具体问题，这里是一个代码段，用于回答您的修改（指向另一个问题）：
< pre class =snippet-code-js lang-js prettyprint-override> '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 = ['＃67001f'，'＃b2182b'，'＃d6604d'，'＃f4a582'，'＃fddbc7'，'＃e0e0e0' var months = ['January-2016'，'February-2016'，'March-2016'，'white'，'white']; var months = ['January-2016'，'February-2016'，'March-2016'，'bababa'，'＃878787'，'＃4d4d4d'，'＃1a1a1a' 4月 - 2016年，5月 - 2016年，6月 - 2016年，7月 - 2016年， 2016']; var dataWeeks = [Week 1：32< br>第2周：54第3周：19第4周：12，第1周：22周< br& ;第3周：12周第4周：03，第1周：35周第2周：14周第3周：11周第4周：23周，第1周：65周第2周：第53周第3周：16周第4周11天，第1周：11周第2周：52周第3周：22周第4周：12周， 1：09天第2周：44天第3周：59天第4周：87天，第1周：42天第2周：76周第3周：69天第4周：第1周：第1周：第1周：第3周：第1周：第1周：第1周：第1周：第1周：第3周： 19周第4周：84，第1周：16周第2周：66周第3周：11周第4周：86周，第1周：21周第2周：52周 ;第3周：12周第4周：37，第1周：90周第2周：69周第3周：19周第4周：17]; var width =文档。 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; //计算宽度和高度的最小值以设置图表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（' '}）; //用于绘制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 months [i];} this切片的质心var pos = outerArc.centroid（d）; //定义文本标签的左右对齐pos [0] = radius *（midAngle（d）
body {overflow ：隐藏font-size：16px;}。chart-wrapper {width：100％;高度：100％; background-color：＃0d0d0d; position：absolute;} path {stroke：＃0d0d0d; / * stroke-width：5px; * / cursor：pointer; -webkit-transition：fill 250ms; transition：fill 250ms;} path：hover {/ * stroke-width：10px; * / fill：#fff;} text {font-size：.8em; text-transform：uppercase; letter-spacing：.5px;} polyline {fill：none; stroke：#fff; stroke-width：2px; stroke-dasharray：5px;} button {position：absolute; top：20px; left：820px; text-transform：uppercase; padding：5px 10px; outline：none; font-size：.6em;背景颜色：黑色; color：#fff; border：1px solid #fff; letter-spacing：1px; -webkit-transition：all 250ms; transition：all 250ms;} button：hover {background-color：#fff;颜色：＃0d0d0d; box-shadow：0 0 2px #fff;} button：active {opacity：0.5;} div.tooltip {position：absolute; padding：4px;背景：白色; border：1px solid black; border-radius：2px; font-size：14px;}
<！DOCTYPE html> ;< html xmlns =http://www.w3.org/1999/xhtmlxml：lang =enlang =en>< head> < title>疯狂饼图< / title> < meta http-equiv =Content-Typecontent =text / html; charset = iso-8859-1/> <！ - Tooltip classes - > < link rel =stylesheethref =http://vadikom.com/demos/poshytip/src/tip-skyblue/tip-skyblue.csstype =text / css/> < link rel =stylesheethref =https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css> < link rel =stylesheethref =css / style.css>< / head>< body> < div class =chart-wrapper>< / div> < button onclick ='replay（）'> Replay< / button> < div class =texttdata-tip =this is the data。>< / div> < script src ='http：//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'>< / script> < script src =js / index.js>< / script>< / body>< / html>
I have a chart,
http://codepen.io/Siddharth11/pen/LVQmjN
I want to display a popup as I hover over the color codes written on right side in the above chart.
I will be displaying seprete info for each color code.So how can we create a sepeate popup for each color code.
Similar to a morris map : http://codepen.io/andreic/pen/CJoze
or this :http://codepen.io/anon/pen/woJMrX
This question didnot fetch any correct response yet.i tried using a jquery plugin(poshy tip) and tried to solve the issue.yet no luck.I had reposted the question with the progress made.Kindly refer the link for the current situation with the code : jquery plugin to bind data to a tool-tip (poshy tip)
'use strict';
var dataset1 = [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 = ['#67001f', '#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#e0e0e0', '#bababa', '#878787', '#4d4d4d', '#1a1a1a', '#1a1a1a', '#1a1a1a'];
var weeks = ['January - 2016 ', 'February', 'March', '#fdae61', '#fee08b', '#e6f598', '#abdda4', '#66c2a5', '#3288bd', '#5e4fa2', '#1a1a1a', '#1a1a1a'];
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 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(dataset1).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(dataset1));
text.enter().append('text').attr('dy', '0.35em').style("opacity", 0).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);
var polyline = svg.select(".lines").selectAll("polyline").data(pie(dataset1));
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);
};
body {
overflow: hidden;
font-size: 16px;
}
.chart-wrapper {
width: 100%;
height: 100%;
background-color: #0d0d0d;
position: absolute;
}
path {
stroke: #0d0d0d;
/* stroke-width: 5px; */
cursor: pointer;
-webkit-transition: fill 250ms;
transition: fill 250ms;
}
path:hover {
/* stroke-width: 10px; */
fill: #fff;
}
text {
font-size: .8em;
text-transform: uppercase;
letter-spacing: .5px;
}
polyline {
fill: none;
stroke: #fff;
stroke-width: 2px;
stroke-dasharray: 5px;
}
button {
position: relative;
top: 20px;
left: 820px;
text-transform: uppercase;
padding: 5px 10px;
outline: none;
font-size: 1.2em;
background-color: transparent;
color: #fff;
border: 1px solid #fff;
letter-spacing: 1px;
-webkit-transition: all 250ms;
transition: all 250ms;
}
button:hover {
background-color: #fff;
color: #0d0d0d;
box-shadow: 0 0 2px #fff;
}
button:active {
opacity: 0.5;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Crazy Pie Chart</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="chart-wrapper"></div>
<button onclick='replay()'>Monthly</button>
<button type="button">Weekly</button>
<script src='http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
解决方案 This is probably too broad for SO, but this is how I like to create tooltips without any external library or plugin. It's based on creating a <div>, that we will show/hide using "opacity".
First, set the CSS style for the tooltip, using a div with a class named "tooltip", or any other name:
div.tooltip {
position: absolute;
/*your other styles here*/;
}
Then, set a tooltip variable:
var tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
This div has 0 opacity. Then it's just a matter of showing the tooltip on mouseover or mousemove:
text.on("mousemove", function(d) {
tooltip.html("Hello, I am<br>a tooltip!")
.style('top', d3.event.pageY - 6 + 'px')
.style('left', d3.event.pageX + 10 + 'px')
.style("opacity", 1);
}).on("mouseout", function(d) {
tooltip.style("opacity", 0);
});
You can use HTML tags to style your text inside the tooltip, making it bold, italic etc.
Here is your CodePen: http://codepen.io/anon/pen/rWyyra?editors=0010
EDIT: Despite this being the correct answer for your specific and particular problem stated in the question, here is a snippet answering your edit (which points to another question):
'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 = ['#67001f', '#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#e0e0e0', '#bababa', '#878787', '#4d4d4d', '#1a1a1a', 'white', 'white'];
var months = ['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 dataWeeks = ["Week 1: 32<br>Week 2: 54<br>Week 3: 19<br>Week 4: 12","Week 1: 22<br>Week 2: 14<br>Week 3: 12<br>Week 4: 03","Week 1: 35<br>Week 2: 14<br>Week 3: 11<br>Week 4: 23","Week 1: 65<br>Week 2: 53<br>Week 3: 16<br>Week 4: 11","Week 1: 11<br>Week 2: 52<br>Week 3: 22<br>Week 4: 12","Week 1: 09<br>Week 2: 44<br>Week 3: 59<br>Week 4: 87","Week 1: 42<br>Week 2: 76<br>Week 3: 69<br>Week 4: 33","Week 1: 11<br>Week 2: 65<br>Week 3: 69<br>Week 4: 33","Week 1: 99<br>Week 2: 66<br>Week 3: 19<br>Week 4: 84","Week 1: 16<br>Week 2: 66<br>Week 3: 11<br>Week 4: 86","Week 1: 21<br>Week 2: 52<br>Week 3: 12<br>Week 4: 37","Week 1: 90<br>Week 2: 69<br>Week 3: 19<br>Week 4: 17"];
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 months[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(dataWeeks[i])
.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);
};
body {
overflow: hidden;
font-size: 16px;
}
.chart-wrapper {
width: 100%;
height: 100%;
background-color: #0d0d0d;
position: absolute;
}
path {
stroke: #0d0d0d;
/* stroke-width: 5px; */
cursor: pointer;
-webkit-transition: fill 250ms;
transition: fill 250ms;
}
path:hover {
/* stroke-width: 10px; */
fill: #fff;
}
text {
font-size: .8em;
text-transform: uppercase;
letter-spacing: .5px;
}
polyline {
fill: none;
stroke: #fff;
stroke-width: 2px;
stroke-dasharray: 5px;
}
button {
position: absolute;
top: 20px;
left: 820px;
text-transform: uppercase;
padding: 5px 10px;
outline: none;
font-size: .6em;
background-color: black;
color: #fff;
border: 1px solid #fff;
letter-spacing: 1px;
-webkit-transition: all 250ms;
transition: all 250ms;
}
button:hover {
background-color: #fff;
color: #0d0d0d;
box-shadow: 0 0 2px #fff;
}
button:active {
opacity: 0.5;
}
div.tooltip {
position: absolute;
padding: 4px;
background: white;
border: 1px solid black;
border-radius: 2px;
font-size: 14px;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Crazy Pie Chart</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<!-- Tooltip classes -->
<link rel="stylesheet" href="http://vadikom.com/demos/poshytip/src/tip-skyblue/tip-skyblue.css" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="chart-wrapper"></div>
<button onclick='replay()'>Replay</button>
<div class="textt" data-tip="this is the data ."></div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
这篇关于显示弹出/信息提示/工具提示作为悬停特定文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆