<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div.tooltip {
position: absolute;
text-align: left;
font: 14px sans-serif;
line-height: 1.4;
padding: 5px;
background: white;
border-style: solid;
border-width: 1px;
border-color: blue;
pointer-events: none;
}
.krugPieTextLegend {
text-anchor: middle ;
font-family: sans-serif;
font-size: 17px;
fill: white ;
}
.krugLegText {
font-family: sans-serif;
font-size: 17px;
}
.krugRectLeg{
width: 25px;
height: 25px;
}
</style>
</head>
<body>
<svg class='graf20' width="300" height="500"></svg>
</body>
<script src="http://d3js.org/d3.v4.min.js"> </script>
<script>
prop8 = {
"colorsKrug": ["#FDCA8B", "#7A9F86", "#8BC33C", "#66977B", "#828BC4", "#828BC4", "#8DC2D7"] ,
"radius" : 100,
}
div = d3.select("body").append("div").attr("class", "tooltip").style("opacity", 0);
drawGraph20( [ {"asdasd":1} ,{"sssss":22} ]);
function drawGraph20(data) {
// init block
var svg = d3.select(".graf20");
svg.selectAll("*").remove();
widthSvg = +svg.attr("width");
heightSvg = +svg.attr("height");
width = +svg.attr("width") ;
height = +svg.attr("height");
center = svg.append("g")
.attr("class", "center")
.attr("transform", "translate("+[ width/2, +prop8.radius+30 ]+")")
;
x = d3.scaleLinear()
.domain([0 , 100 ] )
.range([ 0 , +prop8.radius ])
;
// init block
function cutLongText (str) {
str = str[0];
if (str.length > 25)
return str.substr(0,25) + "..." ;
else
return str ;
}
function currencySwapNoCut(d) {
d= parseInt(parseFloat(d) );
return d.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ") + " руб.";
}
function drawBase(canvas){
te = canvas.append("g").attr("class" , "basePie");
pie = d3.pie().padAngle(.0).sort(null);
arc = d3.arc();
dat = [];
data.forEach(function (t) {
dat.push((Object.values(t))[0])
})
pie( dat ).forEach( function (t, i ) {
t.outerRadius = prop8.radius ; t.innerRadius = 35;
te.append("path")
.attr("fill" , prop8.colorsKrug[i] )
.attr("d", arc(t))
.on("mousemove", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div.html(
Object.keys(data[i]) +" : " + currencySwapNoCut(t.data ) )
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
})
;
if ( +(t.data / d3.sum(dat))*100 >11)
txt=( (t.data / d3.sum(dat)).toFixed(3) * 100).toFixed(1) + '%' ; else txt="";
te.append("text")
.attr("class" , "krugPieTextLegend")
.attr("transform" , "translate(" + d3.arc().centroid(t) + ")")
.text( txt )
;
});
}
function drawLegend(canvas) {
te = canvas.append("g")
.attr("transform" , "translate("+[ 50 , +prop8.radius*2 + 100 ]+")")
;
caps = ["Поступления в ФБ","Поступления в бюджет Волгоградской области"];
data.forEach(function (d , i ) {
leg = te.append("g").attr("transform" , "translate("+[ 0, i*40 ]+")");
leg.append("text")
.attr("class", "krugLegText").text( cutLongText(Object.keys(data[i]) ) )
;
leg.append("rect")
.attr("class" , "krugRectLeg")
.attr("transform" , "translate("+[ -35,-18 ]+")")
.attr("fill", prop8.colorsKrug[i])
;
})
}
drawLegend(svg);
drawBase(center);
}
</script>
</html>