mirror of https://github.com/BTCPrivate/z-nomp.git
Add tooltip
This commit is contained in:
parent
a0548f53eb
commit
5fafea636c
|
@ -10,8 +10,7 @@
|
||||||
border: solid 1px #c7c7c7;
|
border: solid 1px #c7c7c7;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
/*margin-bottom: 18px;*/
|
margin-bottom: 18px;
|
||||||
margin: auto;
|
|
||||||
}
|
}
|
||||||
.chartLabel{
|
.chartLabel{
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
|
@ -19,7 +18,7 @@
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
}
|
}
|
||||||
.chartHolder{
|
.chartHolder{
|
||||||
margin: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#boxesLower {
|
#boxesLower {
|
||||||
|
@ -70,6 +69,22 @@
|
||||||
.boxStatsList > div > div{
|
.boxStatsList > div > div{
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
div.tooltip {
|
||||||
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
|
width: 60px;
|
||||||
|
height: 28px;
|
||||||
|
padding: 2px;
|
||||||
|
font: 12px sans-serif;
|
||||||
|
background: lightsteelblue;
|
||||||
|
border: 0px;
|
||||||
|
border-radius: 8px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
#tooltip.hidden {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div id="topCharts">
|
<div id="topCharts">
|
||||||
|
@ -178,8 +193,9 @@
|
||||||
|
|
||||||
<center><div id="bottomCharts" style="text-align:center;" align="center">
|
<center><div id="bottomCharts" style="text-align:center;" align="center">
|
||||||
<div class="chartWrapper" style="text-align:center;">
|
<div class="chartWrapper" style="text-align:center;">
|
||||||
<div class="chartLabel">Founders of recent blocks</div>
|
<div class="chartLabel">Founders of the last {{=blockscomb.length}} blocks</div>
|
||||||
<div class="chartHolder"><svg id="blocksPie" style="display: block; margin: auto; text-align:center;"/></div>
|
<div class="hidden" id="tooltip"><p><span id="value"></span> blocks found by <span id="finderr"></span></p></div>
|
||||||
|
<div class="chartHolder" id="pie"><svg id="blocksPie" style="display: block; margin: auto; text-align:center;"/></div>
|
||||||
</div>
|
</div>
|
||||||
</div></center>
|
</div></center>
|
||||||
{{ } }}
|
{{ } }}
|
||||||
|
@ -214,7 +230,10 @@
|
||||||
var legendSpacing = 5;
|
var legendSpacing = 5;
|
||||||
|
|
||||||
var color = d3.scale.category20c();
|
var color = d3.scale.category20c();
|
||||||
console.log(d3.scale)
|
var div = d3.select("#pie").append("div")
|
||||||
|
.attr("class", "tooltip")
|
||||||
|
.style("opacity", 0);
|
||||||
|
|
||||||
var vis = d3.select('#blocksPie')
|
var vis = d3.select('#blocksPie')
|
||||||
.data([data])
|
.data([data])
|
||||||
.attr("width", 1000)
|
.attr("width", 1000)
|
||||||
|
@ -224,13 +243,36 @@
|
||||||
.append("svg:g")
|
.append("svg:g")
|
||||||
.attr("transform", "translate(" + r + "," + r + ")");
|
.attr("transform", "translate(" + r + "," + r + ")");
|
||||||
|
|
||||||
|
|
||||||
var pie = d3.layout.pie().value(function(d){return d.value;});
|
var pie = d3.layout.pie().value(function(d){return d.value;});
|
||||||
|
|
||||||
// declare an arc generator function
|
// declare an arc generator function
|
||||||
var arc = d3.svg.arc().outerRadius(r);
|
var arc = d3.svg.arc().outerRadius(r);
|
||||||
|
|
||||||
// select paths, use arc generator to draw
|
// select paths, use arc generator to draw
|
||||||
var arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class", "slice");
|
var arcs = vis.selectAll("g.slice")
|
||||||
|
.data(pie)
|
||||||
|
.enter()
|
||||||
|
.append("svg:g")
|
||||||
|
.attr("class", "slice")
|
||||||
|
.on("mouseover", function(d, i){
|
||||||
|
d3.select("#tooltip")
|
||||||
|
.style("left", d3.event.pageX + "px")
|
||||||
|
.style("top", d3.event.pageY + "px")
|
||||||
|
.style("opacity", 1)
|
||||||
|
.select("#value")
|
||||||
|
.text(data[i].value);
|
||||||
|
d3.select("#tooltip")
|
||||||
|
.select("#finderr")
|
||||||
|
.text(data[i].label);
|
||||||
|
})
|
||||||
|
.on("mouseout", function(d) {
|
||||||
|
d3.select("#tooltip")
|
||||||
|
.transition()
|
||||||
|
.duration(500)
|
||||||
|
.style("opacity", 0);
|
||||||
|
});
|
||||||
|
|
||||||
arcs.append("svg:path")
|
arcs.append("svg:path")
|
||||||
.attr("fill", function(d, i){
|
.attr("fill", function(d, i){
|
||||||
return color(i);
|
return color(i);
|
||||||
|
|
Loading…
Reference in New Issue