logo标签列表

将弹出窗口/信息提示/工具提示显示为悬停在特定文本上。

javascriptjqueryhtmld3.jsjquery-plugins
3
我有一个图表，链接在这里：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) 

'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>

你可能指的是工具提示，而不是弹出窗口。 - Gerardo Furtado
是的，工具提示或信息提示...感谢@Gerardo - jane
如果您不介意使用插件，可以查看这个网站：http://qtip2.com/。 - Shobhit Srivastava
@ShobhitSrivastava 感谢您的建议，尝试进行集成。但在这里它不起作用。祝上帝保佑。 - jane
http://codepen.io/anon/pen/vyxmER ... 带有年份的代码可以展示我想要实现的内容。 - jane
1个回答
6

这可能过于宽泛了，不适合在 SO 上发布，但这是我喜欢创建工具提示而不使用任何外部库或插件的方法。它基于创建一个 <div>，我们将使用 "opacity" 来显示/隐藏它。

首先，设置工具提示的 CSS 样式，使用一个带有类名为 "tooltip" 或其他名称的 div：

div.tooltip {   
    position: absolute;         
    /*your other styles here*/;              
}

然后，设置一个提示文本变量：

var tooltip = d3.select("body").append("div") 
    .attr("class", "tooltip")               
    .style("opacity", 0);

这个 div 的不透明度为 0。然后只需要在鼠标悬停或移动时显示工具提示：

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);
    });

您可以使用HTML标签来为工具提示中的文本设置样式，例如加粗、斜体等。
这是您的CodePen链接：http://codepen.io/anon/pen/rWyyra?editors=0010 编辑：尽管这是您在问题中所述的特定问题的正确答案，但以下代码片段回答了您的编辑（指向另一个问题）。 

'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>

1
让我告诉您我在这里试图实现什么。您看到的颜色代码将被替换为一年中的月份- 1月，2月，3月... 现在，当我悬停在月份上时，我希望显示1周、2周、……、第4周的1月份数据，第5周、第6周、……、第8周的2月份数据，以此类推。我将使用php来输出每周数据的值，例如：week1:23，week2:45，week3:56，week4:75等。我检查了您的代码。这个可以实现吗？您认为呢？谢谢。 - jane
1
可以的。但是，正如我之前告诉过你的那样，你需要学习如何使用D3来绑定数据。如果你在这里问这样的问题，人们会抱怨你想让他们“免费写代码”，而且他们是对的。话虽如此，这本关于D3的书非常出色，并且可以在线免费阅读！http://chimera.labs.oreilly.com/books/1230000000345 - Gerardo Furtado
没问题，很高兴你能帮忙。我会尝试解决的。无论如何还是谢谢你。愿上帝保佑你。 - jane
1
@jane，尽管你已经两次未接受这个答案，我还是编辑了它来再次回答你。然而，这是我最后一次回答你的问题。祝你好运。 - Gerardo Furtado
2
@GerardoFurtado 非常感谢您提供的解决方案。我非常感激。您真是太好了。正是因为像您这样的人，这个社区才能成为现在的模样。我不会争论或辩护。愿上帝保佑您。 - jane
显示剩余8条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接