<!DOCTYPE html>
<meta charset="utf-8">
<svg class='grafTwo' width="500" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
drawGist();
function drawGist() {
prop = {
"paddingLeft" : "100" ,
"paddingBottom" : "200" ,
"paddingTop" : "20" ,
"paddingRight" : "30" ,
"backColor" : "#acc" ,
}
// console.log(data);
svg = d3.select(".grafTwo");
svg.selectAll("*").remove();
widthSvg = +svg.attr("width");
heightSvg = +svg.attr("height");
width = +svg.attr("width") - +(prop.paddingLeft)- +(prop.paddingRight);
height = +svg.attr("height") - +(prop.paddingBottom) - +prop.paddingTop;
asisX = svg.append("g")
.attr("class", "asisX")
.attr("transform", "translate(" + [+prop.paddingLeft , heightSvg - +prop.paddingBottom ] + ")")
.attr("width", width )
.attr("height", +prop.paddingBottom)
;
asisXtop = svg.append("g")
.attr("class", "asisXtop")
.attr("transform", "translate(" + [ +prop.paddingLeft , 0 ] + ")")
.attr("width", width )
.attr("height", +prop.paddingTop)
;
gist = svg.append("g")
.attr("class", "gist")
.attr("transform", "translate(" + [+prop.paddingLeft , +prop.paddingTop ] + ")")
.attr("width", width )
.attr("height", heightSvg - +prop.paddingBottom - +prop.paddingTop )
;
asisY = svg.append("g")
.attr("class", "asisY")
.attr("transform", "translate(" + [0, +prop.paddingTop] + ")")
.attr("width", +prop.paddingLeft)
.attr("height", heightSvg - +prop.paddingBottom - +prop.paddingTop)
;
asisYright = svg.append("g")
.attr("class", "asisYright")
.attr("transform", "translate(" + [widthSvg -+prop.paddingRight , +prop.paddingTop] + ")")
.attr("width", +prop.paddingRight )
.attr("height", heightSvg - +prop.paddingBottom - +prop.paddingTop)
;
showBorders(asisX);
showBorders(gist);
showBorders(asisY);
showBorders(asisXtop);
showBorders(asisYright);
diff = 1.2;
min = 0;
max = 500;
y = d3.scaleLinear()
.domain([min * diff, max * diff])
.range([height, 0])
;
// console.log([max , min]);
x = d3.scaleLinear()
.domain([0, 21])
.range([+prop.gistPadding, ( +prop.barSize + +prop.spaceBetween) * 21])
;
barSize = +prop.barSize;
function drawAsisX(canvas) {
line = d3.line().x(function(d) {return d[0];} ).y(function(d) { return d[1]} ) ;
console.log(getElemWidth(canvas))
canvas.append("path")
.attr("transform", function (d) {
return "translate(" + [0, -height + y(0)] + ")"
})
.attr("d", line([[0, 0], [getElemWidth(canvas), 0]]))
.attr("stroke-width", 4)
.attr("stroke", "#CDD5DE")
;
}
function drawAsisY(canvas) {
// back
rects = canvas.append("g").attr("class", "backRects");
console.log(width);
tis = y.ticks();
backHei = y(tis[0]) - y(tis[1]);
tis.forEach(function (d, i) {
// console.log(y.ticks());
if (i % 2 == 0 && i!=0) {
rectHeight = y(d.planOut);
rects.append("rect")
.attr("transform", "translate( " + [ getElemWidth(canvas) , y(d)] + ")")
.attr("width", width)
.attr("height", backHei)
.attr("fill", prop.backColor)
;
}
});
//asis
line = d3.line().x(function(d) {return d[0];} ).y(function(d) { return d[1]} ) ;
canvas.append("path")
.attr("transform", "translate(" + [0, 0] + ")" )
.attr("d", line([
[getElemWidth(canvas), 0],
[getElemWidth(canvas), getElemHeight(canvas)]
]))
.attr("stroke-width", 4)
.attr("stroke", "#CDD5DE")
;
legend = canvas.append("g")
.attr("transform", "translate(" + [getElemWidth(canvas), 0] + ")")
.attr("class", "legend")
;
y.ticks().forEach(function (dat, i) {
if (i != y.ticks().length - 1 && i !=0) {
text = legend.append("g")
.attr("transform", function (d) {
return "translate(" + [0, y(dat)] + ")"
})
;
text.append("text")
.attr("text-anchor", "end")
.attr("dominant-baseline", "central")
.attr("transform", "translate(" + [-10, 0] + ")" )
.text( currencySwap(dat) )
;
text.append("circle")
.attr("r", 5)
.attr("fill", "#CDD5DE")
;
}
});
}
function showBorders(canvas ) {
g = canvas.append("g");
line = d3.line().x(function(d) {return d[0];} ).y(function(d) { return d[1]} ) ;
d = [
[0,0] ,
[0,getElemHeight(canvas)] ,
[getElemWidth(canvas),getElemHeight(canvas)] ,
[getElemWidth(canvas),0] ,
[0,0] ,
]
g.append("path")
.attr("d", line(d))
.attr("stroke-width", 4)
.attr("stroke", "#CDD5DE")
;
}
function currencySwap(d) {
// d = parseInt(d * 0.001);
return d.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ") + "";
}
function cutLongText (str) {
str = str[0];
if (str.length > 22){
return str.substr(0,22) + "..." ;
}
else
return str ;
}
function breakLongText (str , limit) {
str = str[0];
if (str.length > limit){
s="";
if (str[limit-1]!=" ") for (i=limit;i< limit+10;i++) {
if (str[i]==" ") {
limit=i+1;
break;
}
}
s = "<tspan y='-20' x='0' dy='1.2em'>" + str.substr(0,limit) + "</tspan>" ;
s += "<tspan x='0' dy='1.2em'>" + str.substr(limit) + "</tspan>" ;
return s ;
}
else
return str ;
}
function currencySwapWithText(d) {
d= parseInt(parseFloat(d)*0.001 );
return d.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ") + " тыс. руб.";
}
function currencySwapNoCut(d) {
d= (parseFloat(d) ).toFixed(2);
d = d.toString().replace(".", ",")
return d.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ") + " руб.";
}
function cutLongSum(d) {
if (+d > 1000)
return d.toString().substr(0, 3);
else
return d;
}
function getElemWidth(el) {
return d3.select(el)._groups["0"]["0"]._groups["0"]["0"].getAttribute("width");
}
function getElemHeight(el) {
return d3.select(el)._groups["0"]["0"]._groups["0"]["0"].getAttribute("height");
}
drawAsisY(asisY);
drawAsisX(asisX);
}
</script>
