问题描述
当我将光标悬停在栏上时，我试图通过更改栏的颜色来使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 (将#修改为@）
设置时间 控制面板
错误1：Request method ‘DELETE‘ not supported 错误还原：...