Как написать циркулярный календарь используя библиотеку d3.js?
Есть мой код, благодарю за помощь участников https://ru.stackoverflow.com Хочется убрать тормоза(зависания). И сделать так, чтобы хранилище событий использовалось.Как всегда, хочется хакнуть жизнь.Есть 366 дней универсально. И есть id (выбранный день года) т.е. переменная (S). И есть переменные text: (text1,text2,text3,text4) которые отображают События, время, id of Event, и день года
/*
Вот в чем вопрос:
Убрать зависания!
Сделать базу данных!
Сделать посылку на почту письма мол у Вас сегодня день рождения!
Запустить это на сайт чтобы он информировал меня о датах...
Сделать простую Регистрацию пользователей на сайте.
Стало интересно пишите мне [email protected]
*/
Вот мой код:
<!DOCTYPE html>
<meta charset="utf-8">
<title>My_Calendar_Project_v_1.0.0.0 </title>
<html>
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
html,body{
overflow-y:hidden;
}
</style>
<body>
<script>
//********************************************************************************************************************************************************************
/*Subject: to Areg
*Перменные text3 отвечает за событие
*Переменная S Отвечает за (id События) = [0,365]
*
*
*/
//****************************************************************************************************
//W1="55,55 100,100 300,555 777,888"; Такой формат должен быть везде. или хъ[a,b,c,d,e,f,g,h]
var now1 = new Date();;
var YYYY1=now1.getFullYear();
var delay1=999; //Частота обновления экрана
var hh1=now1.getHours();
var mm1=now1.getMinutes();
var ss1=now1.getSeconds();
//var now1 = new Date();
var ddd=Math.floor((Date.now() - Date.parse(new Date().getFullYear(), 0, 0)) / 86400000);
var text1 = "id: ";
var text2 = "Time: ";
var text3 = "Event: "
var text4 = "ddd: "
var xc=0
var yc=0;
var degree1=270;
var maxddd=366;
var SetHeight1 = 1024;
var SetWidth1 = 1366;
var R1 = SetHeight1 / 20.0 * 4.77;
var R2 = SetHeight1 / 20.0 * 3.77;
var R3 = SetHeight1 / 20.0 * 2.77;
var R4 = SetHeight1 / 20.0 * 1.77;
var p1=(2*Math.PI)/366.0;
var p2=(2*Math.PI)/(24.0);
var delta=SetWidth1/20.0*4.22;
var x1 = [366+1];
var y1 = [366+1];
var x2 = [366+1];
var y2 = [366+1];
//var x3 = [366+1];
// var y3 = [366+1];
var x4 = [24+1];
var y4 = [24+1];
var x5 = [24+1];
var y5 = [24+1];
for(var i=0;i<=366;i++){
y1[i]=R1*(Math.sin(i*p1))+delta;
x1[i]=R1*(Math.cos(i*p1))+delta;
y2[i]=R2*(Math.sin(i*p1))+delta;
x2[i]=R2*(Math.cos(i*p1))+delta;
}
for(var i=0;i<=(24);i++){
y4[i]=R2*(Math.sin(i*p2))+delta;
x4[i]=R2*(Math.cos(i*p2))+delta;
y5[i]=R3*(Math.sin(i*p2))+delta;
x5[i]=R3*(Math.cos(i*p2))+delta;
}
var canvas = d3.select("body")
.append("svg")
.attr("height", SetHeight1)
.attr("width", SetWidth1);
var polygon24=canvas.append("polygon")
for(var i=0;i<=24;i++){
polygon24=canvas.append("polygon")
.attr("points", [x4[i],y4[i],x4[i+1],y4[i+1],x5[i+1],y5[i+1],x5[i],y5[i]])
.style("fill", "yellow")
.style("stroke", "black")
.style("strokeWidth", "1px")
}
var polygon0=canvas.append("polygon")
for(var i=0;i<=maxddd-1;i++){
polygon0=canvas.append("polygon")
.attr("points", [x1[i],y1[i],x1[i+1],y1[i+1],x2[i+1],y2[i+1],x2[i],y2[i]])
.style("fill", "yellow")
.style("stroke", "black")
.style("strokeWidth", "1px")
}
var polygon1=canvas.append("polygon")
for(var i=0;i<=ddd;i++){
polygon1=canvas.append("polygon")
.attr("points", [x1[i],y1[i],x1[i+1],y1[i+1],x2[i+1],y2[i+1],x2[i],y2[i]])
.style("fill", "lightgreen")
.style("stroke", "black")
.style("strokeWidth", "1px")
}
var S=ddd;
var polygon2=canvas.append("polygon")
polygon2=canvas.append("polygon")
.attr("points", [x1[S],y1[S],x1[S+1],y1[S+1],x2[S+1],y2[S+1],x2[S],y2[S]])
.style("fill", "green")
.style("stroke", "black")
.style("strokeWidth", "1px")
/////******************************************************
var t1 = canvas.append("text")
.style("fill", "black")
.style("font-size", "31px")
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.attr("transform", "translate(300,180) rotate(0)")
.text(text1+" "+S);
var t2 = canvas.append("text")
.style("fill", "black")
.style("font-size", "31px")
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.attr("transform", "translate(236,230) rotate(0)")
.text(text2);
var t3 = canvas.append("text")
.style("fill", "black")
.style("font-size", "31px")
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.attr("transform", "translate(300,280) rotate(0)")
.text(text4);
var t4 = canvas.append("text")
.style("fill", "black")
.style("font-size", "31px")
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.attr("transform", "translate(260,330) rotate(0)")
.text(text3+" "+ddd);
function Ekaterinburg10(){
for(var i=0;i<=hh1-1;i++){
polygon24=canvas.append("polygon")
.attr("points", [x4[i],y4[i],x4[i+1],y4[i+1],x5[i+1],y5[i+1],x5[i],y5[i]])
.style("fill", "lightgreen")
.style("stroke", "black")
}
polygon2.attr("points", [x1[S],y1[S],x1[S+1],y1[S+1],x2[S+1],y2[S+1],x2[S],y2[S]]);
polygon2.style("fill", "blue");
}
function Ekaterinburg24(){
now1 = new Date();;
ddd=Math.floor((Date.now() - Date.parse(new Date().getFullYear(), 0, 0)) / 86400000);
YYYY1=now1.getFullYear();
delay1=999; //Частота обновления экрана in ms
hh1=now1.getHours();
mm1=now1.getMinutes();
ss1=now1.getSeconds();
maxddd=366;
for(var i=0;i<=hh1-1;i++){
polygon24=canvas.append("polygon")
.attr("points", [x4[i],y4[i],x4[i+1],y4[i+1],x5[i+1],y5[i+1],x5[i],y5[i]])
.style("fill", "lightgreen")
.style("stroke", "black")
}
for(var i=0;i<=maxddd-1;i++){
polygon0.attr("points", [x1[i],y1[i],x1[i+1],y1[i+1],x2[i+1],y2[i+1],x2[i],y2[i]]);
//polygon0.attr("transform", "translate("+xc+","+yc+") rotate("+degree1+")");
}
for(var i=0;i<=ddd;i++){
polygon1.attr("points", [x1[i],y1[i],x1[i+1],y1[i+1],x2[i+1],y2[i+1],x2[i],y2[i]]);
// polygon1.attr("transform", "translate("+xc+","+yc+") rotate("+degree1+")");
polygon1.attr("points", [x1[ddd],y1[ddd],x1[ddd+1],y1[ddd+1],x2[ddd+1],y2[ddd+1],x2[ddd],y2[ddd]]);
polygon1.style("fill", "green");
}
polygon2.attr("points", [x1[S],y1[S],x1[S+1],y1[S+1],x2[S+1],y2[S+1],x2[S],y2[S]]);
polygon2.style("fill", "blue");
// polygon2.attr("transform", "translate("+xc+","+yc+") rotate("+degree1+")");
t2.text(text1+(S+1));
if((ss1)<=9 ||(ss1)==0 ){
ss1="0"+""+ss1;
}
//ss1=0;
t3.text(text2+(hh1+":"+mm1)+":"+ss1);
t4.text(text3+("_"));
t1.text(text4+(ddd)+"/"+(maxddd-ddd));
}
/////****************************************************** upadate to 999 millis
var repeatHandle = window.setInterval(function() {
delay1=999; //Частота обновления экрана
Ekaterinburg24();
}, delay1);
//document.forms['yourform']['yourtextarea'].value = 'yourvalue';
/////******************************************************
window.addEventListener("wheel", function(ev) {
var dir = Math.sign(ev.deltaY);
if(dir==-1){
if(S+1<=maxddd-1){S++;}
else{S=0;}
//degree1++;
}
if(dir==1){
if(S-1>=0){S--;}
else {S=maxddd-1;}
//degree1--;
}
Ekaterinburg10();
});
</script>
</div>
</body>
</html>