我正在使用d3.js在其上绘制带有错误栏的散点图。我想知道是否有可能在错误栏的两端显示鼠标悬停事件以显示值。
例如,当鼠标悬停在A点的条形图的两端时,将弹出数字3.9和4.1。
这是我的plunker
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Plot</title>
<style>
.axis path,
.axis line{
fill: none;
stroke: #000;
shape-rendering: crishpEdges;
}
path {
stroke-width: 1.5px;
stroke: darkgrey;
stroke-dasharray:"3, 3";
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="errorbar.js"></script>
<div id="chart">
</div>
<script>
var data = [
{x: 4, y: "A", s: 0.1
},
{x: 4, y: "B", s: 0.2
},
{x: 3, y: "C", s: 0.2
},
];
data.forEach(function(d){
d.x = +d.x;
d.y = d.y;
d.s = +d.s;
//return console.log(data);
})
//creating the plot
var m = {t:10, r:100, b:40, l:40 },
w = 960 - m.l - m.r,
h = 500 - m.t - m.b;
var x = d3.scale.linear()
.range([0, w])
.domain([0,d3.max(data, function(d){return d.x})]);
var y = d3.scale.ordinal()
.rangeRoundPoints([h-18,0])
.domain(data.map(function(d){return d.y;}));
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(6);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(3);
var eb = errorBar()
.oldXScale(x)
.xScale(x)
.oldYScale(y)
.yScale(y)
.yValue(function(d){return d.y})
.xValue(function(d){return d.x})
.xError(function(d){return d.s})
.yError(function(d){return null});
var svg = d3.select("#chart")
.append("svg")
.attr("width", w + m.l + m.r)
.attr("height", h + m.t + m.b)
var plot = svg.append("g")
.attr("transform", "translate(" + m.l + "," + m.t + ")");
var circles = plot.selectAll("g")
.data(data)
.enter()
.append("g")
var plotErrorbar = circles.append("g")
.attr("class", "errorBar")
.attr("transform", function(d) {return "translate("+ x(d.x) +","+ y(d.y) +")"})
.style("stroke-dasharray", ("3, 3"))
.call(eb);
var plotCircles = circles.append("circle")
.attr("class", "circles")
.attr({
cx: function(d) { return x(d.x); },
cy: function(d) { return y(d.y); },
r: 8
})
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate("+ m.l +"," + (h + m.t) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform","translate("+ m.l +","+ m.t +" )")
.call(yAxis);
</script>
</body>
</html>
谢谢!
最佳答案
要制作工具提示,请执行以下操作。为工具提示添加样式:
步骤1添加以下样式
div.tooltip {
position: absolute;
text-align: center;
width: 60px;
height: 38px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
第2步
进行div并将其添加到主体将其不透明度设置为0
// Define the div for the tooltip
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
第三步:
在鼠标悬停时,使其不透明度为1,在鼠标悬停时,其不透明度为0。
var circles = plot.selectAll("g")
.data(data)
.enter()
.append("g").on("mouseover", function(d) {//on mouse over make opacity 0.9
div.transition()
.duration(200)
.style("opacity", .9);
//to div add the text of your choice.
div.html(d.x + "<br/>" + d.y + "<br/>" + d.s)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()//on mouse out make opacity 0
.duration(500)
.style("opacity", 0);
});
工作代码here