我有一个图表,链接在这里:http://codepen.io/Siddharth11/pen/LVQmjN
我想要在上述图表右侧的颜色代码上悬停时显示弹出窗口。
我将为每个颜色代码显示不同的信息。那么我们如何为每个颜色代码创建单独的弹出窗口呢?
类似于morris地图:http://codepen.io/andreic/pen/CJoze 或者这个:http://codepen.io/anon/pen/woJMrX 这个问题还没有得到正确的回答。我尝试使用了一个jQuery插件(poshy tip)并尝试解决这个问题,但是没有成功。我已经重新发布了这个问题并附带了代码进展情况。请参考以下链接获取当前情况:jquery plugin to bind data to a tool-tip (poshy tip)
我将为每个颜色代码显示不同的信息。那么我们如何为每个颜色代码创建单独的弹出窗口呢?
类似于morris地图:http://codepen.io/andreic/pen/CJoze 或者这个:http://codepen.io/anon/pen/woJMrX 这个问题还没有得到正确的回答。我尝试使用了一个jQuery插件(poshy tip)并尝试解决这个问题,但是没有成功。我已经重新发布了这个问题并附带了代码进展情况。请参考以下链接获取当前情况: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>