如何解决在d3v3中使用鼠标悬停功能更改条形的颜色并添加说明条形高度的工具提示框
当我将光标悬停在栏上时，我试图通过更改栏的颜色来使svg更具交互性。我还试图添加一个框，当我将光标悬停在其上方时，它会显示条的值（高度）。出现图形，但与鼠标悬停功能的交互性不起作用。这是我第一次使用鼠标悬停功能和工具提示。任何帮助是极大的赞赏。我已经附上了下面使用的代码。
数据集也可以在这里找到。 https://www.dropbox.com/sh/luuzptywj2d7tv5/AAC23U5xWNzVL7mEPjPf5jPHa?dl=0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
<title></title>
<style>
#tooltip {
position: absolute;
text-align: center;
width: 200px;
height: auto;
padding: 10px;
font: 12px sans-serif;
background-color: lightsteelblue;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10x rgba(0,0.4);
-moz-box-shadow: 4px 4px 10x rgba(0,0.4);
box-shadow: 4px 4px 10px rgba(0,0.4);
pointer-events: none;
}
#tooltip.hidden {
display:none;
}
#tooltip p {
margin:0;
font-family:sans-serif;
font-size: 16px;
line-height: 20px;
}
</style>
</head>
<body>
<div id = "tooltip" class="hidden">
<p><span id="value">100</span></p>
</div>
<script type = "text/javascript">
var margin = {top: 50,right: 50,bottom: 50,left: 50},width = 700 - margin.left - margin.right,height = 300 - margin.top - margin.bottom;
var svg2 = d3.select("body")
.append("svg")
.attr("width",width + margin.left + margin.right)
.attr("height",height + margin.top + margin.bottom)
.attr("transform","translate(" + margin.left + ")")
.style('background-color','white');
d3.csv("/data/deathdays.csv",function(csv)
{
deathdays = csv; //copy data from csv to deaths
console.log(deathdays); // output csv to console
deathdays.forEach(function(d) {
d.deaths = +d.deaths;
});
var maxValue = d3.max(csv,function(d) { return d.deaths; });
//CREATE SCALES
var x = d3.scale.ordinal()
.domain(deathdays.map(function(d) { return d['date']; }))
.rangeRoundBands([0,width+100],.1);
var y = d3.scale.linear()
.domain([0,maxValue])
.range([height,0]);
//CREATE AXIS
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("right");
//APPEND AXIS TO SVG
svg2.append("g")
.attr("class","x axis")
.style("font","8px times")
.attr("transform","translate(0," + (height+50) + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor","end")
.attr("dx","-.8em")
.attr("dy",".05em")
.attr("transform",function(d) {
return "rotate(-90)"
});;
svg2.append("g")
.attr("class","y axis")
.style("font","10px times")
//.attr("transform"," + width + ")")
.attr("transform","translate(594,50)")
.call(yAxis);
// Define the div for the tooltip
var div = d3.select("body").append("div")
.attr("class","tooltip")
.style("opacity",0);
//Loop through all the dates
var bar2 = svg2.selectAll(".deathdates")
.data(deathdays)
.enter()
.append("rect")
.attr('class','deathdates')
.style('fill','#d55e00')
.attr("x",function(d) { return x(d['date'])+8; })
.attr("y",function(d) { return y(d['deaths'])+50; })
.attr("height",function(d) { return height - y(d['deaths']); })
.attr("width",x.rangeBand())
.append("title")
.text(function(d) {
return "This value is " + d.deaths;
})
.on("mouseover",function(d) {
var xPosition = parseFloat(d3.select(this).attr("x")) + x.rangeBand() / 2;
var yPosition = parseFloat(d3.select(this).attr("y")) / 2 + height / 2;
d3.select("#tooltip")
.style("left",xPosition + "px")
.style("top",yPosition + "px")
.select("#value")
.text(d.deaths);
d3.select("#tooltip").classed("hidden",false)
d3.select(this)
.attr('fill','#cc79a7')
})
.on("mouseout",function() {
d3.select("#tooltip").classed("hidden",true);
d3.select(this)
.attr('fill','#d55e00')
});
svg2.append("text")
.text('Deaths by Date')
.attr("text-anchor","middle")
.attr("class","graph-title")
.attr("y",height - 180)
.attr("x",(width+100) / 2.0);
});
</script>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
